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.
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.
Related
I wanted to take a picture of a photo I have on my webpage using a canvas to get a local url for it. Obviously, this is redundant because I already have the url for the photo, but it would be useful in other contexts (like videos). When I execute this code, a white box appears that is not the image I use for testing purpose. Where am I going wrong here?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js" defer></script>
</head>
<style>
img{
height: 500px;
width: 500px;
}
</style>
<body>
<img id="test" src="img_url">
<button onclick="takePhoto()">Click Me</button>
</body>
</html>
JS:
var width=200
var height=300
function takePhoto(){
var test = document.getElementById("test")
var canvas = document.createElement("canvas")
document.body.appendChild(canvas)
var cxt = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
cxt.drawImage(test, width, height);
var data = canvas.toDataURL('image/png');
console.log(data)
}
The 3 params version of drawImage() is
drawImage(source, x, y);
You did set the x and y params to the width and height of the canvas, which means the browser will draw the image from the bottom right corner of the canvas, which obviously doesn't do much.
You probably wanted the 5 params version
drawImage(source, x, y, resizeWidth, resizeHeight);
Where you'd set x and y to 0.
This question already has answers here:
Canvas has white space at the bottom and scrolls too far [duplicate]
(2 answers)
Closed 3 years ago.
I have set my canvas's height to the window's inner width. Whenever I scroll down, the canvas shifts up a bit revealing a white space. How can I make it that you are unable to scroll down.
//declare variables
var body = document.getElementById("body");
var canvas = document.getElementById("canvas");
var iwidth = window.innerWidth;
var iheight = window.innerHeight;
//puts canvas in top right corner
body.style.margin = "0";
//changes the canvas's style namely color, margin, width and height
canvas.style.backgroundColor = "red";
canvas.style.margin = "0";
canvas.width = iwidth;
canvas.height = iheight;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DUNGE</title>
</head>
<body id="body">
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
There is white space under your canvas, because the HTML <canvas> element has a default style of display: inline;. Inline elements are designed to contain text, and therefore white space gets added underneath the element for descenders (the bits that hang off the bottom of 'y' and 'p').
To fix the problem, apply display: block; to the element instead.
Using Javascript, you would do that like this:
canvas.style.display = "block";
//declare variables
var body = document.getElementById("body");
var canvas = document.getElementById("canvas");
var iwidth = window.innerWidth;
var iheight = window.innerHeight;
//puts canvas in top right corner
body.style.margin = "0";
//changes the canvas's style namely color, margin, width and height
canvas.style.backgroundColor = "red";
canvas.style.margin = "0";
canvas.style.display = "block";
canvas.width = iwidth;
canvas.height = iheight;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DUNGE</title>
</head>
<body id="body">
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
You can also fix the problem by applying font-size: 0; to the canvas, but display: block is better because it is made to do what you want your canvas to do.
See also https://stackoverflow.com/a/5078297/7733026
var body = document.getElementById("body");
var canvas = document.getElementById("canvas");
var iwidth = window.innerWidth;
var iheight = window.innerHeight;
body.style.margin = "0";
canvas.style.backgroundColor = "red";
canvas.style.margin = "0";
canvas.width = iwidth;
canvas.height = "100vh";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Page</title>
</head>
<body id="body">
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
What is the trick with canvas scale discrepancy? I used canvas scale model for example 10 px by 10 px, draw it, but actually when I checked it (counting exactly amount of pix in the row) - its more then 10 px, its about 15px !!!
Here is the code html:
<div id="canvasDiv">
<canvas id="canvasSignature" width="10px" height="10px" ></canvas>
</div>
For JS:
var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);
Do I need to adjust some scale (calibrating) for browser or something else ?
Full code:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="canvas.css">
</head>
<body>
<h1>Canvas 100px * 100px</h1>
<div id="canvasDiv">
<canvas id="canvasSignature" ></canvas>
</div>
<input type="button" value = "Draw" onclick=ClearCanv();>
<br>
<script type="text/javascript">
function ClearCanv(){
var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
//context.clearRect(0, 0, canvas.width, canvas.height);
//ctx.clearRect(0, 0, c.width, c.height);
//ctx.fillRect(10,10,50,50);
//ctx.beginPath();
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);
}
</script>
</body>
</html>
Here is CSS:
#canvasDiv {
width: 10px;
height: 10px;
}
I tried solution for Canvas is stretched when using CSS but normal with "width" / "height" properties
It doesn't help!
JSFiddle:
https://jsfiddle.net/neL81ce5/3/
I am new one for canvas.I want to know how to draw a line with scrollable canvas window.my expectation is canvas window fit the screen and if line went to out side of the view port then the canvas window is scrollable until to view the end of the line.i try this code.any idea for this problem.Thank you.
<html>
<head>
<head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;float: left;" > Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(1500,1000);
ctx.stroke();
}
draw();
</script>
</body>
</html>
You can have the browser add scrollbar(s) by wrapping a taller canvas inside a shorter div and setting the shorter div's overflow:scroll.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,1000);
ctx.stroke();
body{ background-color: ivory; }
#viewport{width:320px;height:150px;border:1px solid blue;overflow:scroll;}
#canvas{border:1px solid red; }
<div id=viewport>
<canvas id="canvas" width=300 height=1500></canvas>
</div>
After I set the canvas in HTML for a certain size, for example, 800x600, the script will not fill for me, but if I set it to be 150x150, it will. Why is it happening? Can it be fixed? Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Let's Draw!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="drawShape();">
<canvas id="my_canvas" width="800" height="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>
Javascript:
function drawShape(){
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); // ctx = context
ctx.fillStyle = "red";
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
800x600 is relatively small and should be supported by all reasonable browsers that support canvas. Canvases 4 times the size should work. What browser/OS are you using?