I m drawing text content on the canvas which is dynamically generated but I cant able to estimate the height the content occupies within the canvas as resetting the canvas height will reset the canvas. How can I resize the canvas based on the height of the content it draws so that the content is accumulated exactly.
Presenting complex tabular text as an inaccesible canvas image is a terrible usability mistake. However if you must you can use the table as an image. You can get the with and height of the image and set the size of your canvas. Finaly you draw the image on the canvas.
var img = new Image();
img.src = whatever;
img.onload = function() {
//get the with and height of the image
var w = img.width;
var h = img.height;
// set the canvas width and height
canvas.width = w;
canvas.height= h;
// draw the image
ctx.drawImage( img, 0, 0, w, h );
Related
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
My canvas is 500px x 500px.
I have a png image that is 500px x 500px:
I want to re-size the image to be say... 100px x 100px, and then use that re-sized image as part of defining a repeat pattern and then using that as a fillStyle to repeat across the whole canvas. This is what I do...
//...define canvas, ctx, width and height above
var image = new Image();
image.onload = function() {
_self = this;
drawBG();
}
image.src = 'img.png';
function drawBG() {
var space = ctx.createPattern(_self, 'repeat');
ctx.fillStyle = space;
ctx.fillRect(0, 0, width, height);
}
Now, this is all well and good if I want to waste my own time. See, the space image is the same size as the canvas. My question is... How do you first resize the original image(in javascript) to then later create a pattern with it?
P.S. How do you re-size an image on stack overflow? This image I have showing here is to big for it's purpose.
You can draw your image on a second offscreen canvas, with drawImage(img, x, y, resizedWidth, resizedHeight) and then use this canvas as pattern.
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
// create an off-screen canvas
var patt = document.createElement('canvas');
// set the resized width and height
patt.width = 50;
patt.height = 50;
patt.getContext('2d').drawImage(this, 0,0, patt.width, patt.height);
// pass the resized canvas to your createPattern
drawBG(patt);
}
image.src = 'http://lorempixel.com/500/500';
function drawBG(patternCanvas) {
var space = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = space;
ctx.fillRect(0, 0, 400, 200);
}
<canvas id="canvas" width="500" height="250"></canvas>
I have a problem with the initial width of the canvas.
What I have is a canvas element with a image background that's set to cover and than within the jquery the canvas width is set to the window.InnerWidth, the height is the width / 3. (this is to keep the background image in proportion as it's a banner and can't be cut off or stretched).
My problem is that the initial scale of the canvas is 300 x 150 and than it's calculated to the screen size. So what happens is, you have the banner being loaded at 300px x 150px and than after a second or so jumps to the correct size.
Here's an example of this: CodePen
function initHeader() {
width = window.innerWidth;
height = width / 3;
target = {
x: width / 2,
y: height / 3
};
canvas = document.getElementById( 'canvas' );
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext( '2d' );
Through CSS I've tried setting the width of the canvas to 100%, it stretches the banner and creates a gap below the banner which I don't want.
I've tried everything I could think of and just can't come up with a valid solution.
Any advice would be greatly appreacited!
So it take some delay to resize image? So don't init it when canvas not resize yet.
canvas.width = width;
canvas.height = height;
canvas.style.backgroundImage = "...."
Hope this help.
Hi want to resize an image using canvas but can't get it to work...
I want the image to be 100px * 100px, is there any way to solve this?
I have tried googleing and trying but can't get it to work...
I also tried changing the img size in css but this doesn't help either, please help me!
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to guess the
// original format, but be aware the using "image/jpg" will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
I also realized that I need to rotate it how can I do this?
You have to get a ratio of the width and apply it to the height.
var ratio = 100 / img.width; // 100 for desired width in px
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(img, 0,0, canvas.width, canvas.height);
typed on phone so forgive small mistakes.
I am getting pixels values from an image using canvas. The image size is 170*170 pixels. Here is my code:
var canvas = document.createElement("canvas");
canvas.style.width = img.width;
canvas.style.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var pixelData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height).data;
It works well, I have values in pixelData, until I reach pixelData[102000]... I've test it with a white image, and all the values from pixelData[0] to pixelData[101999] are 255, but then it is 0 until the end...
Somebody sees why? Maybe this is about canvas width and height?
Your canvas size is not what you think it is.
You are only setting the size of the canvas element not the canvas bitmap:
canvas.style.width = img.width;
canvas.style.height = img.height;
This means your bitmap is actually 300 x 150 pixels in size, the default size, and you're just scaling that to the size of the image (since it's all white you won't be able to detect this so easily).
Since your image is 170 x 170 pixels you will only paint part of the canvas leaving the rest to default RGBA value [0,0,0,0].
In order to properly set the size of the canvas you must edit the above mentioned lines to be:
canvas.width = img.width;
canvas.height = img.height;