The canvas draw the wrong way on my website

Question

I have a problem with the canvas drawing, this is my code follow W3school to draw a clock, but when i coded on my website, it's drawing the wrong way. I don't know why....

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = 75;

ctx.translate(radius, radius);

radius = radius * 0.90

drawClock();

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  
  ctx.fillStyle = "white";
  ctx.fill();
}

#canvas {
  width: 15vw;
  height: 15vw;
  background-color: red;
  position: fixed;
  left: 80%;
  top: 50px;
}

<canvas id="canvas"></canvas>

http://www.dhtmlgoodies.com/tutorials/canvas-clock/ – StackSlave Jan 02 '20 at 08:40 — StackSlave, Jan 02 '20 at 08:40

StackSlave · Answer 1 · 2020-01-02T05:24:54.320

You need to start the .arc in the center. Also, you have to set your width and height on the canvas itself with canvasElement.width = or on the <canvas>, not using CSS or canvasElement.style.width =:

var canvas = document.getElementById('can'), ctx = canvas.getContext('2d'), sz = 75;
ctx.fillStyle = '#fff'; ctx.arc(sz, sz, sz, 0, Math.PI*2); ctx.fill();

canvas{
  background:#f00;
}

<canvas width='150' height='150' id='can'></canvas>

The canvas draw the wrong way on my website

1 Answers1