GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Saturday, March 12, 2011

JS - Drawing Path On Canvas

<h1>Canvas Tutorial</h1>
<canvas id="canvas" width="200" height="200">No Support</canvas>
<style>
canvas { border: 1px solid #ccc; background: yellow; -moz-box-shadow: 0 0 4px #ccc; -moz-border-radius: 4px;}
</style>

<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.fillStyle = "rgb(150,250,0)";

// Filled Shape
context.beginPath();

context.moveTo(10,10);
context.lineTo(100,10);
context.lineTo(100,100);
context.lineTo(10,100);

context.moveTo(150, 10);
context.lineTo(180, 10);
context.lineTo(180,100);
context.lineTo(150, 100);

context.fill()


// Stroke


</script>

Share/Bookmark

No comments:

Post a Comment