GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Saturday, March 12, 2011

JS - Canvas Element Basic Drawing

Here's a canvas element - a new standard in HTML 5.
<canvas id="canvas" width="200" height="200">Not Supported</canvas>

Then in javascript block, you can manipulate it:
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.fillStyle = "rgb(150,250,0)";
context.fillRect(50,50,100,100); // x,y,width,height

context.fillStyle = "rgb(50, 1250, 50)";
context.fillRect(30, 90, 150, 20);  // draw rect

context.strokeRect(10,10,30,100);  // draw outline of rect

context.clearRect(100,100,20,20); // make transparent

</script>
Share/Bookmark

No comments:

Post a Comment