4

I want to make simple shapes using HTML. But the shapes need to be big. And the canvas is in full screen

Example: http://jsfiddle.net/xLgg43s9/1/embedded/result/

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* { margin: 0; padding: 0;}

body, html { height:100%; }

#canvas {
    position:absolute;
    width:100%;
    height:100%;
}
</style>
</head>

<body>
<canvas id="canvas">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#000";
var w=canvas.width;
var h=canvas.height;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="#fff";
ctx.beginPath();
var a=w/2;
var b=0;
ctx.arc(a,b,20,0,Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(0,0,10,100);
ctx.stroke();
ctx.save();

ctx.translate(240, 120);

ctx.rotate(Math.PI / 4); // 45 degrees

ctx.fillStyle = "yellow";
ctx.fillRect(-40, -40, 20, 20);

ctx.restore();

</script>
</body>
</html>

Please fix it.

kritya
  • 3,312
  • 7
  • 43
  • 60
  • possible duplicate of [Resize HTML5 canvas to fit window](http://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window) – Philipp Dec 30 '14 at 13:40

1 Answers1

8

Don't set the canvas's size through CSS, that stretches the canvas element, instead of actually making the canvas larger.

Use HTML attributes, instead:

<canvas id="canvas" width="500" height="500"></canvas>

Now, since you want to set the canvas to 100% width / height, those pre-set attributes aren't going to do the trick for you, you're going to have to use some JS:

var canvas = document.getElementById("canvas");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...

If you want to have the canvas resize when the window gets resized, I'd suggest you look at this answer.

Community
  • 1
  • 1
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • 1
    __[And it appears to work](http://jsfiddle.net/Lh8uepys/1/)__. You can remove the `#canvas` css class. – Cerbrus Dec 30 '14 at 13:15