O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Putting it all together: drawing a jet

In this recipe, we'll push the limits of the HTML5 canvas drawing API by drawing a vector-style jet using lines, curves, shapes, colors, linear gradients, and radial gradients.

Putting it all together: drawing a jet

How to do it...

Follow these steps to draw a vector-style jet:

  1. Define a 2D canvas context and set the line join style:
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
      var grd;
      
        context.lineJoin = "round";
  2. Draw the right tail wing:
     // outline right tail wing context.beginPath(); context.moveTo(248, 60); //13 context.lineTo(262, 45); // 12 context.lineTo(285, 56); //11 context.lineTo(284, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required