I'm trying to resize my html5 canvas to be the same size as the page but for some reason, the javascript isn't changing its size. Here's a snippet of my code:
let canvas = document.getElementById('canvas').getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
$(window).resize(function() {
canvas.width = $(window).width();
canvas.height = $(window).height();
});
canvas {
border: 1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500px" height="500px"></canvas>
<!-- more html -->
The canvas remains 500px no matter what I do, please help.
Try this:
$(document).ready(function(){
var w = $(window).width();
var h = $(window).height();
$('#canvas').width(w);
$('#canvas').height(h);
});
$(window).resize(function(){
var w = $(window).width();
var h = $(window).height();
$('#canvas').width(w);
$('#canvas').height(h);
});
#canvas {
width: 500px;
height: 500px;
/* for testing */
background: #CFF000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas'></canvas>
Related
A red block on image, size is 50*50, and image origin size is 320*180, image element size is 200*113
now I want to get the red block and draw on canvas, but I have no idea how to calculate, please let me know why and how!!
my sample code here
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
const naturalWidth = img.naturalWidth;
const naturalHeight = img.naturalHeight;
const ratio = naturalWidth / img.offsetWidth;
const heightRatio = naturalHeight / img.offsetHeight;
const canvasRatio = naturalWidth / c.width;
const canvasYRatio = naturalHeight / c.height;
console.log(ratio, heightRatio, canvasRatio);
const r = 1/(naturalWidth/naturalHeight);
console.log(r);
const width = 50;
const height = 50;
const top = 50 * heightRatio;
const left = 90 * ratio;
ctx.drawImage(img, -left, -top);
};
body{
position: relative;
}
<img id="scream" src="https://img.youtube.com/vi/uwMQRAC1JE8/mqdefault.jpg" alt="The Scream" width="200">
<div style="
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
border: 1px solid red;
"></div>
<canvas id="myCanvas" width="50" height="50" style="border:1px solid #d3d3d3;display:block" />
You need to use the long version of ctx.drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) in order to be able to crop and resize the original image.
The short 2 arguments version is simply drawing the original image at the orignal size, with some offset on the destination, but you need to apply the resizing on your output too.
So using the long version you can do
ctx.drawImage(img,
// source
x * ratioW,
y * ratioH,
width * ratioW,
height * ratioH,
// destination
0,
0,
width,
height
);
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
const naturalWidth = img.naturalWidth;
const naturalHeight = img.naturalHeight;
const ratio = naturalWidth / img.offsetWidth;
const heightRatio = naturalHeight / img.offsetHeight;
const canvasRatio = naturalWidth / c.width;
const canvasYRatio = naturalHeight / c.height;
const r = 1/(naturalWidth/naturalHeight);
console.log(r);
const width = 50;
const height = 50;
const top = 50 * heightRatio;
const left = 90 * ratio;
ctx.drawImage(
img,
left, top, width * ratio, height * heightRatio,
0, 0, width, height
);
};
body{
position: relative;
}
<img id="scream" src="https://img.youtube.com/vi/uwMQRAC1JE8/mqdefault.jpg" alt="The Scream" width="200">
<div style="
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
border: 1px solid red;
"></div>
<canvas id="myCanvas" width="50" height="50" style="border:1px solid #d3d3d3;display:block" />
An HTML canvas element can be automatically resized by the dynamics of a HTML page: Maybe because its style properties are set to a percentage value, or maybe because it is inside a flex container.
Thereby the content of the canvas gets resized as well: Because of the interpolation the canvas content looks blurred (loss of resolution).
In order to keep the resolution to the maximum, one must render the canvas content based on the current pixel size of the element.
This fiddle shows how this can be done with the help of the function getComputedStyle: https://jsfiddle.net/fx98gmu2/1/
setInterval(function() {
var computed = getComputedStyle(canvas);
var w = parseInt(computed.getPropertyValue("width"), 10);
var h = parseInt(computed.getPropertyValue("height"), 10);
canvas.width = w;
canvas.height = h;
// re-rendering of canvas content...
}, 2000); // intentionally long to see the effect
With a setTimeout function I'm updating the width and height of the canvas to the computed values of these properties.
As the fiddle shows, this works only when increasing the size of the window. Whenever the window size gets decreased, the canvas (item of the flexbox) stays fixed.
Set its flex-basis to 0, allow it to shrink with flex-shrink, and don't force any minimum width:
#canvas {
flex: 1 1 0;
min-width: 0;
}
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
setInterval(function() {
var computed = getComputedStyle(canvas),
w = parseInt(computed.width, 10),
h = parseInt(computed.height, 10);
canvas.width = w;
canvas.height = h;
ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.arc(w/2, h/2, h/2, 0, Math.PI*2, true);
ctx.stroke();
}, 2000); // intentionally long to see the effect
#container {
border: 1px solid blue;
width: 100%;
display: flex;
}
#canvas {
border: 1px solid red;
flex: 1 1 0;
min-width: 0;
height: 150px;
}
<div id="container">
<canvas id="canvas"></canvas>
<div>something else...</div>
</div>
You need to place the canvas into a container with overflow:hidden and set canvas dimensions to dimensions of that container:
window.setTimeout( function() {
var div = $("div");
div.find("canvas").attr( { width:div.width(), height:div.height()} );
})
canvas { background:gold; display:block; }
div { width:50%; height:50%; border:1px solid; overflow:hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<canvas width="200" height="100" />
</div>
I managed to put together a dynamically resizing HTML5 Canvas but it has issues. For instance, it only scales the height, not the width too. My canvas has width of 900px and height of 850px. Another issue is that it enlarges the canvas too, way beyond it's defined width and height.
What am I doing wrong?
Here's what I tried so far:
var canvas, stage, exportRoot;
function init() {
createjs.MotionGuidePlugin.install();
canvas = document.getElementById("canvas");
exportRoot = new lib.Hat_finale();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
function resize() {
var height = window.innerHeight;
var ratio = canvas.width / canvas.height;
var width = height * ratio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}
window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
#container {
margin: 0 auto;
max-width: 900px;
max-height: 850px;
}
<div id="container">
<canvas id="canvas" width="900" height="850" style="background-color:#ffffff"></canvas>
</div>
UPDATE:
If I try what #havex said, changing the attributes like so: canvas.width = width; and canvas.height = height; instead of canvas.style.width = width+'px'; and canvas.style.height = height+'px'; what I get is a resizable box BUT NOT the animation. See picture for reference :
I can't explain why that is happening because it's 4:30 in the morning and I haven't slept yet, but change these and it should work (you can remove the borders):
HTML
<div id="container">
<canvas id="canvas" style="background-color:#ffffff"></canvas>
</div>
CSS
#container{
margin:0 auto;
width:900px;
height:850px;
border: 1px solid black;
}
canvas { width: 900px; height: 850px; border: 1px solid red; }
http://jsfiddle.net/Ln5z1zab/
I'm trying to draw into a canvas, but the more I go right, the more offset my drawing become.
Anyone have an idea why?
I have included the relevant code below:
CSS
html,body {
width:100%;
height:100%;
background:rgba(0,0,0,.2);
}
#container {
position:relative;
width:700px;
height:450px;
background:#fff;
overflow:hidden;
}
* {
-webkit-user-select: none;
}
canvas {
position: absolute;
top: 0;
left: 0;
background: #ccc;
width: 500px;
height: 200px;
}
HTML
<div id='adContainer'>
<canvas></canvas>
</div>
Javascript
var ctx;
var can = $('canvas');
$(document).ready(function() {
ctx = can[0].getContext('2d');
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.lineWidth = 5;
ctx.lineCap = 'round';
can.on("touchstart", function(event) {
event.preventDefault();
var e = event.originalEvent;
if(e.touches.length == 1) {
var posX = e.touches[0].pageX;
var posY = e.touches[0].pageY;
ctx.moveTo(posX, posY);
}
});
can.on("touchmove", function(event) {
event.preventDefault();
var e = event.originalEvent;
if(e.touches.length == 1) {
var posX = e.touches[0].pageX;
var posY = e.touches[0].pageY;
ctx.lineTo(posX, posY);
ctx.stroke();
}
});
});
Demo: http://jsfiddle.net/8Wtf8/
That is because you define the size of the canvas using CSS.
What happens is that when you don't explicitly define the size of the canvas using its width and height attributes the canvas defaults to size 300 x 150.
In your CSS you are then stretching the canvas element (look at it as an image) to 500px etc. - the content of the canvas is still 300 x 150.
You need to set the width and height on the canvas element itself:
<canvas width=500 height=200 id="myCanvas"></canvas>
and remove the definition from the CSS:
canvas {
position: absolute;
top: 0;
left: 0;
background: #ccc;
/*width: 500px;
height: 200px;*/
}
Also notice that background set by CSS will not be part of the canvas content.
In Java script I am changing the height and width of the HTML5 canvas. It works in Mozila, Chrome, opera and safari, But it is not working in IE9. Can any body tell me what I am doing wrong, do I need to set any property?
Thanks in advance
UPDATE:-
HTML:-
<body onload="Load();">
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>
Javascript:-
function Load(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
img=new Image();
img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
img.onload = function(){
canvas.width = 300;
canvas.height = 500;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img,0,0,canvas.width, canvas.height);
}
}
CSS:-
.canvas{
height: auto;
width: auto;
margin : 0px 35px;
border:1px solid black;
position: relative;
}
Try the following code. It is working in IE9, Firefox, Chrome :
<!DOCTYPE html>
<html>
<style language="css/text">
.canvas{
height: auto;
width: auto;
margin : 0px 35px;
border:1px solid black;
position: relative;
}
</style>
<body onload="Load();">
<canvas id="myCanvas" width="500" height="300"></canvas>
<input type="button" onClick="change()"/>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
function Load(){
img=new Image();
//img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
canvas.width = 300;
canvas.height = 500;
context.fillStyle="#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);
//context.drawImage(img,0,0,canvas.width, canvas.height);
}
function change() {
canvas.width = 100;
canvas.height = 100;
context.fillStyle="#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</html>
I found the issue with my canvas. It was the issue with style. I have removed the height and width setting from the style script. Because of it, the canvas height and width was overriding to its default values i.e. 150 and 300 as height and width respectively.