If I set a div's dimensions to be 100 by 100 pixels using $.attr(), and set a canvas within it to be 150 by 150 pixels, again using $.attr() to avoid stretching the canvas, the div automagically expands to fit its contents. Why is this, and how can I make sure the div cuts off the canvas? I have overflow: hidden on the div and want to use it to display only a portion of the canvas. However, all of the canvas is displaying.
Here's a fiddle of my problem.
Set the CSS size of the container and the element size of the canvas:
$("#container").css("width", 100);
$("#container").css("height", 100);
$("canvas").attr("width", 150);
$("canvas").attr("height", 150);
width and height are not valid style attributes, and certinaly not just numerical ones.
Use width() and height() or css() to set inline style properties. Can pass numeric value representing pixels to all 3
DEMO
Related
I am scaling (resizing) a div on mousemove, I am also maintaining aspect ratio of the div. I can scale it as I wanted. I need to calculate the width and height of a scaled div.
Suppose if I scaled a div by some value d in picture, I need to calculate the width and height of div.
Also the div may already be in a rotated position, I have the angle as well.
I dont want values of getBoundingClientRect().
I think the problem is more mathematical.
I've got a zoom button in my application which scales the children of a container using scaleX on each child.
But this makes the content extend beyond the canvas width. So I would need to additionally change the canvas width, but that seems to generally scale the canvas and the content - if I use...
$('canvas').width($('canvas').width() * 2);
...which I don't want. I basically just want to set a new width.
Any advice for this?
Thanks in advance.
The JQuery width method sets the width using CSS, which will stretch the canvas instead of setting its pixel dimensions. From the docs:
Set the CSS width of each element in the set of matched elements.
Instead you can access the canvas element and set it directly, or use the attr method.
// Direct
var elem = $("canvas").get(0);
elem.width = someValue;
elem.height = someOtherValue;
// Or using attr
$("canvas").attr("width", someValue);
Hope that helps!
When i'm setting the canvas width and height with css, the pen is beeing shifted. After zooming in/out in the browser (chromium), the pen isn't shifted anymore.
I'm using the literally canvas widget and want to fit the canvas to its parent div. After initializing the canvas, i'm setting the width/height of the canvas with the jquery css function. But my pen isn't at the same coordinates. After scrolling in or out in my current browser, the pen is at the coordinates where my mouse pointer is. Can anyone help me?
$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});
With canvas you usually find you need to actually set the width and height attributes normally, rather than css/style width and heights.
My example with your code shared would be to try:
$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);
Can you also confirm you are intending to set "containerWidth" for the height and width of the canvas?
Regarding resizing the canvas, consider adding some responsive CSS like this, to maintain the position values, but resize for mobile.
canvas {
width: 100%;
height: auto;
}
You will still need the width and height attributes on the canvas itself though.
Is there a way to get the inner width and height of a canvas based on it's content?
I want to allow the user to write text to a canvas and the user is allowed to pick the font size, font family, etc. Problem is since they have control over the font and the length of text I don't have a way of knowing what to set the width and height of the canvas to.
So is there a way to have the canvas be as big as the content inside it (like the display "inline block" property of CSS) or a way to get the width and height of the inner content of a canvas (in that case I would just adjust the width and height of it after each letter in the text is written)?
Yes, there is. Position a child element inside the canvas. set the child element css as position: absolute; and width: 100%; which will take the full size of its container.
If you know that the canvas will contain text with a certain font / font-size, you can use the canvas measureText function. See this snippet from here:
http://www.w3schools.com/tags/canvas_measuretext.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);
I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.