CODEWITHSUNDEEP
javascripthtmldrawing
MadeInDreams
MadeInDreams

Reputation: 2146

Drawing shape with javascript - shape issue

So i want to make an html5 site that uses javascript graphics. So far its seam pretty easy but.

If i draw a square i get a rectangle. 50 pixel by 50 pixel is not square? So i tryed to play arround with the numbers. I have notice that if i double the width i get something closer to a square. So i tought that it might be becuse of my screen ratio I view my page on a 50" screen on a resolution of 1920x1080

So maybe i have to do the math to get my square fit in the screen ratio.

But if i draw a circle all i get to give is the center and ray so how am i suppose to get my circle perfect or almost?

The entire code im using 

<!DOCTYPE html>
<html lang="Fr">
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>La Maison Repère</title>
<meta name="geo.placename" content="St-Hubert, Québec, Canada" /> 
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" media="all" href="lmr.css" /> 
<meta name="viewport" content="width=device-width" /> 

<SCRIPT type="text/javascript" SRC="js/jsDraw2D.js"> </SCRIPT>
<SCRIPT type="text/javascript" SRC="js/jquery-1.7.2.js"> </SCRIPT>



<body>
<canvas id="graph"></canvas>

<script type="text/javascript">

var c=document.getElementById("graph");
var ctx=c.getContext("2d");
var col1="FF0000";
ctx.fillStyle=col1;
ctx.fillRect(0,0,50,50);

function circle()
{
  var canvas = document.getElementById("graph"); 
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth="3";
  context.arc(50, 50, 90, 0, 2 * Math.PI, true);
  context.stroke();
}
circle();  

</script>

</body>

Anyone know what im doing wrong?

Upvotes: 0

Views: 351

Answers (1)

noob
noob

Reputation: 9212

You need to set the width and height of the canvas in JavaScript too.

So this won't but this will work.

Upvotes: 1

Related Questions