# How to make this spin in Canvas

Printable View

• 01-01-2014, 04:17 PM
Nightcrawler89
How to make this spin in Canvas
Allright, so I started learning canvas and I'm not sure how to do this. What I want is to have 4 images go arround a circular one. Then each image is connected to the center by dotted line. I Was able to do the structure... But I really can't make it spin, I tried implemention some codes online, but I ended up making the entire thing go in circles instead only the lines and other pictures.

To illustrate it better, this is more or less how I'm looking to do it: http://jsfiddle.net/F8x4p/6/show/ exept that I need dotted lines going from the spining circles to the center.

Code:

```function draw() { var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); var w = canvas.width; var h = canvas.height; var angle = 3 * Math.PI / 180; var cx = w/2; var xy = h/2; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.save(); ctx.beginPath();         ctx.setLineDash([5]);         ctx.lineWidth=2;         ctx.moveTo(75, 75);         ctx.lineTo(175, 175); ctx.stroke(); ctx.beginPath();         ctx.moveTo(50, 180);         ctx.lineTo(150, 80); ctx.stroke();ctx.fillRect(x, x, 30, 30); ctx.fillRect(150, x, 30, 30); ctx.fillRect(x, 150, 30, 30); ctx.fillRect(150, 150, 30, 30); ctx.beginPath();         ctx.arc(115, 115, 40, 0, 2 * Math.PI); ctx.stroke(); ctx.restore();```
Note I replaced images with squares here, but pretty much the squares (fillRects) willl be replaced with images.

Any help? or ideas xD