0

I'm attempting to draw this shape on screen with canvas.diamond shape

I have referenced this example which draws a circle: http://jsfiddle.net/loktar/uhVj6/4/ ,but cannot figure it out. Any help would be greatly appreciated. I'm new to canvas.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 85;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';


function animate(current) {
 context.clearRect(0, 0, canvas.width, canvas.height);
 context.beginPath();
 context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
 context.stroke();
 curPerc++;
 if (curPerc < endPercent) {
     requestAnimationFrame(function () {
         animate(curPerc / 100)
     });
 }
}

animate();

I plan on having a bullet point on each angle that would pop up and slightly pause whenever the line gets to that point.

jmchauv
  • 147
  • 17
  • Here's the shape: http://jsfiddle.net/uhVj6/1774/ I'll try to animate the percentages. – user2072826 Jun 29 '15 at 17:13
  • Why don't you just `stroke` a rectangle with `context.rotate(45 * (180 / Math.PI))`? Or are the rounded edges especially significant? If this is the case see this link: [http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas] – gilbert-v Jun 29 '15 at 17:28
  • Yea, the rounded edges are very significant. It's actually borrowed from the company logo. We're enhancing the brand by carrying this mark throughout the site in significant ways. – jmchauv Jun 29 '15 at 19:49
  • You could cheat a bit like this, hard code example http://jsfiddle.net/z7ydxftc/1/ – dwana Jun 30 '15 at 10:59

0 Answers0