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
Related
This question already has answers here:
Size of HTML5 Canvas via CSS versus element attributes
(3 answers)
Closed 1 year ago.
I am trying to use a canvas as a semi-transparent overlay with cutouts over an img tag. I can get the overlay to work, but for some reason clearRect(x,y,width,height) does not put the cutouts in the overlay so the image shows through the overlay. However, I can fill a rectangle with "clear" to make a cutout using fillRect, so I think my code is working. I don't understand why clearRect does not work.
The web page uses django and bootstrap 4. I created a jsfiddle with all the ajax and template tags removed to illustrate the problem. When your mouse hovers over the button 'hover here', the overlay appears but only one cutout is displayed - the one using fillRect, but not the one using clearRect. This happens in both Firefox and Chrome browsers.
What am I doing wrong with the clearRect call?
Thanks!
Mark
UPDATE: I tried to use fillText to write on my canvas, and that is not working as well. What am I doing wrong with my canvas that prevents clearRect and fillText from working? I updated the jsfiddle to reflect the fillText problem.
So, I discovered how to make the code in the jsfiddle work, but I still don't understand why.
If I add these lines to the initialization of the canvas, everything works.
canvas.height = image.height;
canvas.width = image.width;
I had thought the lines
canvas.style.left = position.left + "px";
canvas.style.top = position.top + "px";
canvas.style.width = image.width + "px";
canvas.style.height = image.height + "px";
took care of initializing the canvas size, since I don't know the size of the image until the page is loaded.
If anyone can explain why this fix makes the clearRect and fillText work, please explain!
New fiddle that works. See the comments at the end of the script.
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 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:
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);
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.