I was wondering how I can make my canvas resize along with my browser window? As it is right now, using innerWidth and innerHeight, it will only size to the initial browser width and height. How do I make it expand with the browser?
Edit: Is there a way to do this without clearing the canvas?
JS
canvas.onmousemove = draw;
var ctx = canvas.getContext('2d');
var video = document.createElement("video");
video.setAttribute("src", "some_video.mp4");
video.autoplay = true;
var img2 = new Image;
img2.src = "some_image.png";
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
function draw(e){
var rect = canvas.getBoundingClientRect();
var x = e.clientX-rect.left-img2.width/2;
var y = e.clientY-rect.top-img2.height/2;
ctx.drawImage(video, x, y, 830, 644);
ctx.drawImage(img2, x, y, img2.width, img2.height);
}
Use it on resize
$(window).resize(function(){
// Place your code here which sets the width and height of canvas.
});
Related
How can I crop an area of an image using JavaScript? As I have read, I must use a canvas to project the image on it.
With the following code I am cutting an area of an image, but the size of the cut area is not the indicated one.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// draw cropped image
var sourceX = 0;
var sourceY = 0;
var sourceWidth = 500;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
<canvas id="myCanvas" style="border:1px solid red"></canvas>
I am trying to represent in this image what I want to do.
my main problem is that the canvas does not adapt to the size of the cropped image and the final height (sourceHeight ) and width (sourceWidth ) They are not the ones I specified
How can i fix it?
The problem
Your source "width" is the same width as the image.
The solution
When using ctx.drawImage with 9 arguments, think of it like a cut and paste.
You want to "cut" the outline in red, and "paste" it to your new - centered - location.
You want to "cut" all the way up to the half way point of the source. So you need to select all the way up to the half way point of the image.
I also suggest maybe changing the variable name from "source" to "crop" (cropX, cropWidth, etc) to better reflect its purpose, as it is not really the width of the "source" anymore.
If you want the image to fill the entire canvas, "paste" it with the canvas' width and height at (0,0)
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height);
The code
...
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// crop from 0,0, to 250,150
var cropX = 0;
var cropY = 0;
var cropWidth = 250;
var cropHeight = 150;
//resize our canvas to match the size of the cropped area
canvas.style.width = cropWidth;
canvas.style.height = cropHeight;
//fill canvas with cropped image
context.drawImage(imageObj, cropX, cropY, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
...
You'll need to tell the canvas the size of the image you're trying to display to ensure the canvas has the desiredWith size;
However, the size of your example image is 438 × 300, which makes it hard to crop to 500px.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://placehold.it/700x700';
imageObj.onload = function() {
const desiredWidth = 500;
const desiredHeight = 150;
canvas.width = desiredWidth;
canvas.height = desiredHeight;
context.drawImage(imageObj, 0, 0, desiredWidth, desiredHeight, 0, 0, desiredWidth, desiredHeight);
console.log(canvas.width, canvas.height);
};
<canvas id="myCanvas" style="border:1px solid red"></canvas>
I'm trying to resize and rotate a camera picture in the client side - without any special libraries, I actually managed to do most of the work only that I get an offset of 320 pixels when rotating the image. I'm not sure where this offset is coming from and how I could fix this. Any clues? Here is my code:
function processFile(dataURL, fileType)
{
var image = new Image();
image.src = dataURL;
image.onload = function ()
{
var width = image.width;
var height = image.height;
canvas = document.createElement('canvas');
var compressionQuality = "10"; // this is % i.e. the number should run between 1 to 100, 100 is the highest quality (less compression), 1 is the highest compression (lowest quality)
var mime_type;
if(fileType==="png"){
mime_type = "image/png";
} else if(fileType==="webp") {
mime_type = "image/webp";
} else {
mime_type = "image/jpeg";
}
var cvs = document.createElement('canvas');
if (window.innerHeight > window.innerWidth)
{ //landscape picture - rotate by 90 degrees
var newWidth = height;
var newHeight = width;
cvs.width = newWidth;
cvs.height = newHeight;
var ctx = cvs.getContext("2d");
rotateDegrees=-90;
ctx.clearRect(0,0,width,height);
ctx.translate(newWidth/2,newHeight/2);
ctx.rotate(rotateDegrees*Math.PI/180);
ctx.drawImage(image,-newWidth/2-320,-newHeight/2+320); // <<<--- here I offset by 320px
}
else
{
cvs.width = width;
cvs.height = height;
var ctx = cvs.getContext("2d");
ctx.drawImage(image, 0, 0);
}
dataURL = cvs.toDataURL(mime_type, compressionQuality/100);
sendFile(dataURL);
};
When I move the image by 320px I managed to resolve this by I think that the 320px are dependent on the image size (in that case it is 1900px width)
I appreciate any help or ideas! thanks
Looks like you translate to the center of the canvas to rotate, then immediately try to draw. Your ctx origin in still in the center of the canvas, so you draw with offset.
You need to translate to the new origin before drawing.
I am making a website which will load some blueprint images on a canvas.
but the images are vary in height and width.i Would like to make the canvas scaling equal to the uploaded image scale. How do i code to make the canvas width and height changeble respective to uploaded image.
This done in html5
If I understand you correctly, you want to load images with various dimensions. According to the dimension, set the width / height of the canvas and draw the image?
In that case you could add an eventListener to the image. Once it's loaded, get the width and height. Use those to set the dimensions of the canvas. After that, draw the image on the canvas.
var image = new Image();
image.addEventListener('load', function(e) {
var width = image.width;
var height = image.height;
var canvas = document.querySelector('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
});
image.src = 'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png';
<canvas></canvas>
Fiddle
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'images/e1.jpg';
canvas.width = imageObj.naturalWidth;
canvas.height = imageObj.naturalHeight;
this also works
I'm drawing a large canvas image as a background, the image is larger that the window size. I'm wondering if theres a way for me to center the image to fit on full screen. If so, how? this is what I'm doing:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawStuff();
}
resizeCanvas();
function drawStuff() {
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = '/resources/img/bg.png';
}
Here is an optional way of centering an image to canvas not using transform (also see note below):
imageObj.onload = function() {
var x = (canvas.width - this.width ) * 0.5, // this = image loaded
y = (canvas.height - this.height) * 0.5;
ctx.drawImage(this, x, y);
};
Since the image is larger than the canvas x and y will be negative in this case, which is perfectly fine. If the image was smaller it would work just as fine too. If you do the drawing outside the load handler you would of course need to use imageObj instead of this.
NOTE: The way you have set up your resize handler is not the best way to handle image repositioning - you should only load the image once, then reuse that object. As resizing typically creates a number of events it would trigger an equal number of image reloads.
For this to work properly you could do something like this instead:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
imageObj = new Image(); // declare globally
imageObj.onload = function() {
// now set up handler when image is actually loaded
// - else drawImage will fail (width, height is not available and no data)
window.addEventListener('resize', resizeCanvas, false);
// initial call to draw image first time
resizeCanvas();
};
imageObj.src = '/resources/img/bg.png';
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawStuff();
}
function drawStuff() {
var x = (canvas.width - imageObj.width ) * 0.5,
y = (canvas.height - imageObj.height) * 0.5;
ctx.drawImage(imageObj, x, y);
}
It's not perfect as the resize event queue will still be large and may lag - there are solutions for this too, for example this one (with minor modifications).
Here's how to center the image on the canvas. Any vertical or horizontal overflow will be off-canvas:
imageObj.onload = function() {
ctx.translate(canvas.width/2,canvas.height/2);
ctx.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2);
ctx.translate(-canvas.width/2,-canvas.height/2);
};
Good luck with your project!
If you are adding image after uploading then you can use this, it works for me :)
var image_center_width = (canvas.width - img.width) / 2;
var image_center_height = (canvas.height - img.height) / 2;
img.set({
left : image_center_width,
top : image_center_height,
});
canvas.add(img)
I created breakout using some jquery and a handy tutorial online.
Here is the fiddle: http://jsfiddle.net/Kinetic915/9bLEk/6/
I successfully changed the WIDTH and HEIGHT accessing the window size like this:
From:
WIDTH = $("#canvas")[0].width = $(window).width();
HEIGHT = $("#canvas")[0].height = $(window).height();
To:
var WIDTH = document.getElementById("canvas");
var HEIGHT = document.getElementById("canvas");
WIDTH.width = window.innerWidth;
HEIGHT.height = window.innerHeight;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
the code loads properly. I am finding a problem changing the code that renders the ball.
It works with jquery here:
Cir = $('#canvas')[0].getContext("2d");
Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();
Does not work with:
var canvas = document.getElementById("canvas");
var Cir = canvas.getContext("2d");
Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();
any suggestions?
Change it to this:
var canvas = document.getElementById("canvas");
var Cir = canvas.get(0).getContext("2d");