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;
Related
I'm working on a sketchpad application using html canvas and javascript (trying to stay away from jQuery). The canvas needs to be responsive and I've found several methods to do so, but each one stretches out the canvas and makes the sketchpad unusable. It's hard to explain without seeing the problem. Here's the CodePen. Try drawing inside the canvas and you'll see what I'm talking about. The current method I'm using to resize the canvas incorporates offsetWidth and offsetHeight like so:
var sketchpadContainer = [
document.getElementById('container').offsetWidth,
document.getElementById('container').offsetHeight]
var canvas = document.getElementById('sketchpad');
canvas.style.height = sketchpadContainer[1] + "px";
canvas.style.width = sketchpadContainer[0] + "px";
Is there a way to make the canvas responsive while at the same time keeping the dimensions of the sketch intact?
The CSS width and height properties are NOT the same as the width and height attributes on a Canvas element.
If you absolutely need to use css to set width/height, keep a scale factor of your default canvas size, then multiple the target x and y positions of your mouse position by the inverse of the x/y scale factors (or just divide the target position by them).
Using css to resize your canvas is a bit too hacky imo (and will leave your lines blurry), I highly recommend you instead simlpy change with width/height attributes of your canvas and use CanvasRenderingContext2D.scale() to change the size of your lines (A scale factor will still need to be used to calculate your true mouse pos, however)
Simply change
canvas.style.height = sketchpadContainer[1] + "px";
canvas.style.width = sketchpadContainer[0] + "px";
to
canvas.height = sketchpadContainer[1];
canvas.width = sketchpadContainer[0];
Apply CanvasRenderingContext2D.scale() when you first get your context, and then do as I mentioned above. (ctx.lineTo(x,y); -> ctx.lineTo(x/scaleFactorX,y/scaleFactorY); & lastX=x; -> lastX=x/scaleFactorX;)
I.E See HERE
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 :)
I create an Image object in JavaScript for the purposes of drawing it on a canvas. I set the width and height properties of the image, then draw it on a canvas. The image is drawn at is natural dimensions, not the dimensions that I set.
// Assume image is a loaded image object, and ctx is a canvas' 2D context.
image.width=image.width/2;
image.height=image.height/2;
ctx.drawImage(image,0,0); // Draws the image at its original dimensions, not half-size.
The only way I know of to draw the image at a different size is to set the width and height explicitly as part of the drawImage function, like so:
ctx.drawImage(image,0,0,image.width/2,image.height/2);
Here's a JSFiddle demo of the two methods in action to better illustrate what I'm describing: http://jsfiddle.net/do3gg1cy/.
For my use case I'd like to be able to resize the Image object itself and have it drawn at this size on the canvas (i.e. the first method), rather than having to set the dimensions during the drawImage operation.
Am I setting the width and height properties incorrectly, or does anyone know of another way to go about this?
According to the standard, if "dw" & "dh" are omitted, the drawImage method establishes the source image dimension from the image's intrinsic width & height in image pixels. Modifying the width & height properties doesn't change these intrinsic values.
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.
I'm creating a HTML Canvas object using this javascript code:
var Canvas = document.createElement("canvas");
Canvas.style.width = "500px";
and then i'm drawing text upon it.
When the canvas is displayed, the whole canvas has been scaled up (including content) to to match the 500px width, which results in ugly resampling. What i really want, is that the content stay the same size, only the canvas itself made bigger.
Any ideas?
Try changing the element’s width instead of its CSS width.
Canvas.width = 500;
Thomas' answer is correct, but it sound's like you also want to keep the existing content on the canvas. When you change the canvas size, it automatically gets cleared and reset to it's default state. Because of that, you will either need to redraw the contents, or copy the contents to another canvase (using drawImage), resize the canvas, then copy the contents back (again, using drawImage).