Canvas Drawing Framework Iteration 2
Here is another potential component of the Canvas Drawing framework that I started in the last post. This is adapted from the Mozilla website:
https://developer.mozilla.org/samples/canvas-tutorial/2_3_canvas_lineto.html
function drawShape() {
<pre id="line1"> var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Filled Triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked Triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert( 'You need another browser to view this demo.');
}
}
// The HTML associated with this function looks like the following:
<html>
<head>
<script type="text/javascript">
function drawShape() { }
</script>
</head>
<body onload="drawShape();"></body>
<canvas id="tutorial" width="150" height="150"></canvas>
</html>
Advertisement
leave a comment