I'm trying to place an image on a canvas without resizing it. I thought drawImage(img, x, y) would do the trick, but it stretches the image to fill the canvas.
Also supplying drawImage(img, x, y, width, height) with the dimensions of my image doesn't seem to work.
Here's my code:
<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Thanks in advance!
PS: I added the parseInt's to make sure that drawImage gets valid values.
Don't use CSS to size your canvas. That creates a default sized canvas and stretches it. Set the canvas dimensions directly on it and you'll get a 1 to 1 pixel drawing space.
<canvas id="story" width="800" height="600" style="position:relative;"></canvas>
Trochoid is right, the style attribute on your canvas tag is causing problems. You could set it in the HTML, as he suggests, or better yet you can leave it blank and set it dynamically in the JS:
<canvas id="story"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
canvas.height=height;
canvas.width=width;
context.drawImage(img, 0, 0);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Also make sure you get the width and height of the image and draw it AFTER it has been loaded.
img.onload = function () {
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
};
You have to first load the function image perfectly before rendering on the screen to do that follow the below code..
<img id="demo-img" src="image_name.png">
<br>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("demo-img");
img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
</script>
Try using this library I recently created which can load an image, resize it fixed width & height or precentage, convert to and from other formats like base64 or blob, and allows you to apply a watermark.
var CanvaWork = new CanvaWork();
CanvaWork.loadImage("yourimage.png", function(obj){
console.log(obj.canvas); // The usable canvas
console.log(obj.width);
console.log(obj.height);
console.log(obj.image); // Contains the image file
});
https://github.com/vnbenny/canvawork.js
Hope this helps you!
Related
I'm in the final stretch of the game and when I put the background image, it overlaps the Canvas, how do I fix this? - Google translator
game
game with background
make the image as css background-image of the elements that contains the canvas or make the image absolute with lesser z-index value than the canvas
You can make use of drawImage property of canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var background = new Image();
background.src = "https://cdn0.iconfinder.com/data/icons/is_google_plus_one_icons/256/google_plus_one_-plus-1_canvas.png";
background.onload = function(){
ctx.drawImage(background,0,0, 200, 100);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Make use of onload property of image to draw the canvas contents.
This question already has answers here:
Canvas width and height in HTML5
(3 answers)
Closed 2 years ago.
I would like to dynamically create a canvas, specifying the dimensions of the canvas at runtime; then I'd like to render an image over that canvas so that it fills the entire dimension of the canvas.
This works as expected, when I declare a canvas's width & height on an <canvas> element, as shown in this snippet (hidden by default):
<!DOCTYPE html>
<html>
<body>
<h3>
Source Image
</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" width="200" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
However, if I dynamically create the <canvas> element using Javascript, and use CSS to set the size after creating, the image will not fill the whole canvas:
<!DOCTYPE html>
<html>
<body>
<h3>
Source Image
</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;">
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
c.style.width = "200px";
c.style.height = "200px";
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
I feel like I'm missing something pretty obvious here -- any help would be appreciated on how to get the dynamically rendered Canvas to look like the first snippet.
By using c.style.width, you're defining a scale for displaying it on your screen (it's just CSS).
To actually set the intrinsic size of the canvas, you do this:
window.onload = function() {
var c = document.getElementById("canvas");
c.width = 200;
c.height = 200;
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
<h3>Source Image</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>
Note: This does not prevent you from having a different intrinsic size and display size. In fact, it's often useful if your page is displayed on a Retina screen with a high pixel density. In that case, you can have a 200x200 canvas, and set its CSS dimensions to be 100x100. That way every pixel in the canvas will be exactly 1 pixel of the screen it's displayed on.
More info on window.devicePixelRatio if you're interested.
i have a canvas dynamically written with no id assigned to it. How can i overlay image on the first canvas (out of multiple canvas) via JS ?
<canvas width="240" height="297">
<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>
In order to get the 1st canvas of the DOM using plain javascript you can use the good old function document.getElementsByTagName(). Then do what you want with it.
Probably it would be safer matching even on other attributes - such as class name - just to avoid getting the wrong canvas (jquery selectors would work great).
BTW the following should work
<html>
<head>
<script>
var image = new Image();
image.onload = function (){//react on image download completed
//you can get the 1st canvas of the DOM accessing the array of canvas
var canvas = document.getElementsByTagName("canvas")[0];
//then draw on it as needed
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
};
//load image
image.src = "http://i.imgur.com/ITWfejd.png";
</script>
</head>
<body>
<canvas width="240" height="297"></canvas>
<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>
</body>
</html>
Hi I'm getting image from webcam and I save it on canvas, what I want to do is to stretch it by x and y cooridnates keeping same img dimensions, what I mean is, this is the original webcam picture:
and this is how I wanna it to be when stretched:
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas>
this is the piece of code that shows source image to <img> element in html , so I have to stretch source image before to show it in html
function snap() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
var oImg=document.createElement("img");
oImg.setAttribute('src', canvas.toDataURL());
oImg.setAttribute('alt', 'na');
oImg.setAttribute('width', '1300');
oImg.setAttribute('height', '1300');
var img = document.body.appendChild(oImg);
return img;
}
}
any idea on how to stretch the canvas.toDataUrL() source by x and y coordinates and return it stretched to the the src <img> element?
The real problem imo is how to stretch image without altering width
and height (as shown via example photos above), is this possible?
You can use the extended properties on context.drawImage that allow scaling/positioning.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
var w=img.width;
var h=img.height;
canvas.width=w; // set the canvas size to the original image size
canvas.height=h;
ctx.drawImage(img,
0,0,w,h, // start with the image at original size
-w/4,0,w*1.25,h // widen the original image by 1.25X
// and start drawing 1/4th off the left edge of the canvas
);
}
img.src="temp18.png";
Currently there are are two images I would like to rotate on the canvas, I tried save and restore but didn't work
function SetCanvas()
{
var canvas = document.getElementById('pic1');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
// ctx.save();
ctx.rotate(0.5);
var image = new Image();
image.src ='ME.JPG';
image.onload = function(){
ctx.drawImage(image, 90,0,200,100);
};
}
//ctx.restore();
var canvas2 = document.getElementById("pic2");
var image2 = new Image();
image2.src = 'ME2.JPG';
if(canvas2.getContext)
{
image2.onload = function(){
ctx2=canvas2.getContext('2d');
ctx2.drawImage(image2, 0,0,200,100);
};
}
}
<ul id="picsCanvas" style="overflow:hidden;white-space:nowrap; list-style-type:none;">
<li style=" display:inline; float:left" id="first">
<canvas ID="pic1" width="300" height="360" ></canvas>
</li>
<li id="second" style="margin-top:0px; display:inline; float:left; position:absolute ">
<canvas id="pic2" width="300" height="360" style="position:absolute" ></canvas>
</li>
</ul>
Please note that the code might not be correct as it is something I did a while ago, I just want to get an idea of how to do it and if it is possible... thanks for your help.
The images are loading asynchronously. This means that that entire function (minus the onload handlers for the images happens first. Then when the images are loaded, their handlers are called. This happens in a second pass. By the time this happens, you already rotated and restored the canvas, effectively wiping the rotation out.
The simple fix is to rotate and restore the canvas inside each of the image onload handlers.
These two links give a pretty good explanation and example of how to rotate with HTML5 canvas
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
You set the different angles when you rotate (see code example below).
The general gist of it is:
1) save the context
2) transform to, usually, the center of the image
3) rotate
4) transform back
5) draw image
6) restore
In your case, with two images, you need to transform the origin to the second image before you make the second rotation call. Below is a simplified example rotating one image. Get that sorted and then make the second transform/rotate.
Example:
var canvas = document.getElementById("yourCanvas");
var ctx = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
angle = angle+1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.fillStyle = "#FF0000";
// first image
ctx.translate(150,200);
ctx.rotate( angle*Math.PI/180 ); // rotate 90 degrees
ctx.translate(-150,-200);
ctx.fillStyle = "black";
ctx.fillRect(100, 150, 100, 100);
ctx.fill();
ctx.restore();
}, 5);