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:
- 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;
- Set the spiral style:
context.lineWidth = 10; context.strokeStyle = "#0096FF"; // blue-ish color context.beginPath(); context.moveTo(canvas.width / 2, canvas.height / 2);
- Rotate about the center of the canvas three times (50 iterations ...
Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.