Draw spiral with lineTo method on HTML5 canvas in JavaScript

Description

The following code shows how to draw spiral with lineTo method on HTML5 canvas.

Example


<!--from w  ww  .j a  v a 2  s  .  c  om-->

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var radius = 0;
var angle = 0;

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

for (var n = 0; n < 150; n++) {
radius += 0.75;
// make a complete circle every 50 iterations
angle += (Math.PI * 2) / 50;
var x = canvas.width / 2 + radius * Math.cos(angle);
var y = canvas.height / 2 + radius * Math.sin(angle);
context.lineTo(x, y);
}

context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>

Click to view the demo

The code above generates the following result.

Draw spiral with lineTo method on HTML5 canvas in JavaScript

Home »
  Javascript Tutorial »
    Canvas »
      Canvas Shape

Draw spiral with lineTo method on HTML5 can...

Fill a rectangle in JavaScript
Paint a cloud by using bezier curve in Java...
Set line join style in JavaScript
Set linecap on HTML5 canvas in JavaScript
Show Control points for Cubic Bezier Curves...
Use solid color to fill a triangle in JavaS...