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.
Follow these steps to draw a vector-style jet:
Define a 2D canvas context and set the line join style:
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, 59); // 10 context.lineTo(276, 91); // 9 context.closePath(); context.fillStyle = "#495AFE"; context.fill(); context.lineWidth = 4; context.stroke(); // right tail wing detail context.beginPath(); context.moveTo(281, 54); // 10 context.lineTo(273...