HTML and CSS Reference
In-Depth Information
Listing 4-5. Using Canvas to Make a Star Shape
<script>
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
//draw a star
context.save();
context.beginPath();
context.moveTo(92.0, 1.1);
context.lineTo(120.1, 58.1);
context.lineTo(183.0, 67.2);
context.lineTo(137.5, 111.5);
context.lineTo(148.2, 174.1);
context.lineTo(92.0, 144.6);
context.lineTo(35.8, 174.1);
context.lineTo(46.5, 111.5);
context.lineTo(1.1, 67.2);
context.lineTo(63.9, 58.1);
context.lineTo(92.0, 1.1);
context.closePath();
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();
context.restore();
</script>
You may have noticed that the dimensions of the canvas element needed to be increased to 200 × 200 to view the
full star. Keep this in mind if you try to paint something larger than the canvas dimension supports, as your painting
will render off the element and produce clipping.
Looking at Listing 4-5, you can see that the same methods are being used to draw lines, but this time there's a bit
more complexity in where the starting and ending points are placed. You can also see that a fillStyle method has
been added and given a value of yellow in the RGB (red-green-blue) space. If you're following along, you should get
the image in Figure 4-3 in your browser.
Figure 4-3. A star produced using the canvas element
Search WWH ::




Custom Search