This question already has answers here:
Canvas width and height in HTML5
(3 answers)
Closed 8 years ago.
The application lets user save the designs and post it so other users can view it later.
The original canvas saved with the proportions of width=700 and height=600. But when displaying the canvas, I want to resize the canvas to fit into dimensions of (350,300). half of the original. But if I directly apply those dimensions and load width setWidth() and setHeight() it loads with original proportions.
All I want is to display the canvas with new dimensions.
If you are using the library fabric.js, that's not enough.
Considering that 'canvas' is the fabric.js instance object, you should do this to avoid distorsion artifacts:
canvas.setWidth( <desired width> );
canvas.setHeight( <desired height> );
canvas.calcOffset();
Previously answered here.
I'm not sure what you've been trying, but
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 800;
canvas.height = 600;
should work fine.
Related
This question already has answers here:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(10 answers)
Why box-sizing is not working with width/height attribute on canvas element?
(2 answers)
Closed 3 years ago.
I will draw in a canvas element a grid. For this I use the moveTo and lineTo method. When the canvas element has to inline styling like in this project the grid is incorrect: jsfiddle.net/yzL4ruhf/
When there is an inline styling in the canvas element it's correct. ( jsfiddle.net/7w4qvyfa/4/ )
Can someone explain the difference?
Thanks!
By default, the canvas context has a size of 300x150 pixels. 1
You can think of the canvas like an image with a fixed size. If you scale up an image by setting width and height in CSS it will become pixelated and blurry. Same thing happens with the canvas.
By setting the width and height attributes on the canvas element itself you are actually telling it to use a larger context and thereby creating a bigger image, and so it does not get blurry and pixelated.
If you wish to avoid setting those attributes in your HTML code, you can set them in javascript instead:
context.canvas.width = 501;
context.canvas.height = 381;
Check this answer, So you'll have to use width/height attributes or can do it using javascript like that.
c_canvas.width = 501;
c_canvas.height = 381;
This question already has answers here:
HTML Canvas Full Screen
(15 answers)
Closed 4 years ago.
So I was trying to make a fullscreen canvas for a HTML document using Javascript. I have researched on how to create fullscreen canvas and I found a method but it is not perfect fullscreen. There is extra on the sides the bottom which makes the scroll bar come up. The code that I used is:
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
I found out that the bookmark that I have in my browser (Chrome) pushes the canvas and when I remove it doesn't overflow outside. Is there anyway where if I have a bookmark or don't it will always result in a fullscreen canvas with no extra from the sides and the bottom
scrollHeight and scrollWidth might help
canvas.width = document.body.scrollWidth
canvas.height = document.body.scrollHeight
This question already has an answer here:
Html5 Canvas resize
(1 answer)
Closed 5 years ago.
I'm implementing image upload, but before that, I want to do some resizing based on limits (eg. max-width, max-height, max-area). Problem is not resize image, but filesize.
I already gave up with quality, there was no visible differences in results gained from: Canvas, Pica, Hermite, so i decided to go with offscreen canvas.
Filesize is much bigger problem, eg.: if I have PNG image, that is 345x518 (54.2kB) and I want it to fit into area 512x512, after resizing it into 341x512 jpeg (same aspect ratio), filesize became 171.7kB.
Resize function:
function _canvasImageGet(original, dims) {
var canvas = document.createElement("canvas");
canvas.width = dims.w;
canvas.height = dims.h;
canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);
return canvas;
}
Is there any way, how can I get smaller or same filesize after resizing? It doesn't have to be using Canvas, but I will appreciate, if resizing will be on client. Thanks for all anwers.
Canvas and other libraries I have used are not using compression so after resizing, output file is naturally bigger than it was before. I have found exactly what I needed. image-compressor does resizing and compression and all it's done on client-side. There is another library JIC, but it can't do resizing.
This question already has answers here:
JavaScript Canvas - change the opacity of image
(2 answers)
Closed 6 years ago.
I am making a game that loads canvas first, then load all the images, but I am having problem with the opacity of each image, when I try to use "img.style.opacity = 0.5;" nothing changes in the image...
This is a part of code:
imageObj.src = "table.jpg";
var tequila = new Image();
tequila.src = "tequila.png";
tequila.style.opacity = 0.5;
wisky.onload = function(){
context.drawImage(tequila, 180, 319);
};
}
drawImage draws the image you specify and does not look for any styling applied to the image.
However, the canvas' context has a property called globalAlpha (see https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-globalalpha), so you could set it to 0.5 before you draw the image, and reset it afterwards.
Take a look at this enter link description here and place your images into the associated div containers.
EDIT: really, two downvotes for giving you the exact answer? :S
FYI: Opacity in Canvas is controlled with globalAlpha value as far as i know.
EDIT 2: This was already answered here
You have to either change globalAlpha or draw the image to an
off-screen canvas that has globalAlpha set, then draw this canvas
onto the main canvas.
Just set alpha, draw the image and reset alpha back to full opacity.
Setting alpha does not change the content that is already drawn to the
canvas - it only applies to the next thing drawn (which would be the
image in this case).
And of course, you can always prep your image with an alpha-channel in
case of PNG images.
Cheers to the downers :)
This question already has answers here:
Print canvas contents
(5 answers)
Closed 7 years ago.
I'm printing canvas which is in iFrame. When I print it resolution show too bad.
I think I should make the canvas more larger and scale it to normal size..
HTML :
<iframe width="80px" height="80px" id="printframe">
JS :
var frame = document.getElementById("printframe");
var frame_canvas = frame.contentWindow.document;
frame_canvas.body.innerHTML = '<canvas id="myCanvas" width="980px" style="border: 1px solid black;"></canvas>';
var canvas = frame_canvas.getElementById("myCanvas");
canvas.getContext("2d").scale(0.5, 0.5); // should it be make the
canvas smaller? its not working
var context = canvas.getContext("2d");
context.font = "50px"; // normal size is 10px
context.fillText("This is text to print !!!");
frame.contentWindow.print(); // it prints but resolution is too bad
Is there any way to scale it, or make canvas resolution more better ?
Help me and Thank you ..
A canvas actually has two sizes: the size of the element itself and the size of the element’s drawing surface. Setting the element's width and height attributes sets both of these sizes; CSS attributes affect only the element’s size and not the drawing surface.
One work around is to set the Canvas' Height and Weight through JavaScript like below:
var canvas = frame_canvas.getElementById("myCanvas");
canvas.width = 300;
canvas.height = 300;
If this does not work you can try scaling the canvas like shown below:
context.scale(2,2);