HTML5 canvas basic example

HTML5 canvas can be used to draw graphic in web page HTML using Javascript. Here is a basic example of HTML canvas for beginners.

HTML5 canvas with specific widht height and some inline style

<canvas id="mycanvas1" width="200" height="100" 
style="border:1px solid lightgreen; background-color:lightgray;">
</canvas>
refresh

HTML5 canvas and javascript rectangle

<canvas id="mycanvas1" width="200" height="100" 
style="border:1px solid lightgreen; background-color:lightgray;">
</canvas>
<script type="text/javascript">
window.addEventListener("load", draw);
function draw() {
  var canvas = document.querySelector('#mycanvas1');
  var context = canvas.getContext('2d');
  context.fillStyle="#ff0000";
  context.fillRect(10,10,60,60);
}
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments