HTML5 Canvas Cookbook

Drawing a spiral

Caution, this recipe may induce hypnosis. In this recipe, we'll draw a spiral by connecting a series of short lines to form a spiral path.

How to do it...

Follow these steps to draw a centered spiral:

1. Define a 2D canvas context and initialize the spiral parameters:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");
       
       var radius = 0;
       var angle = 0;

2. Set the spiral style:

   context.lineWidth = 10;
       context.strokeStyle = "#0096FF"; // blue-ish color
       context.beginPath();
       context.moveTo(canvas.width / 2, canvas.height / 2);

3. Rotate about the center of the canvas three times (50 iterations ...