Menu
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.
745
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.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
