I saw on the Internet the different max size and area of a canvas. I would like to change them for my project because i create canvas of 5000px / 2600px. I test to put a smaller canvas (300px / 300px) and it works i've no error (NS_ERROR_FAILURE)
Thank's all
Canvas size is device dependent. Have a look at Maximum size of a <canvas> element, this may help you to resolve the issue.
You may use CSS for that, in your webpage.
<head>
<style>
canvas{
width: 300px;
height: 300px;
}
</style>
</head>
You can't change the maximum canvas size supported by a browser, but you can detect it and avoid creating canvas elements that exceed the browser's size limitations.
See my answer in the Maximum size of a <canvas> element thread for details.
Related
HTML and CSS
.pickthetime {
height: calc(var(--vh, 1vh) * 3);
width: calc(var(--vw, 1vw) * 25);
align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS
font-weight: 300;
}
<input class="pickthetime" type="time" id="pickthetime" name="pickthetime" required />
I have the actual picker set to a certain size as you can see on the CSS. No matter what I do, I can't seem to scale the font size automatically based on the size of the time picker. If I increase or decrease the font size too much using calc(var(--vw, 1vw) * somenumberhere) it's always too big or too small on some devices. Some font sizes work well on my Android phone, but then it won't work with my iPhone 11 or (using the Chrome device toolbar) iPhone X.
I have also tried to use FitText but the same issue occurs. It does scale a bit better on Chrome (using device toolbar) or on my Android phone.
I...don't know what to try from here. What works on 1 device, doesn't work on the other 2. All I want is for the font size of the time to render according to the width of the time picker (but I don't want it to become hidden by the little clock icon that browsers like Chrome or the arrow down icon that browsers like Safari on iOS use).
I would suggest not using vw/vh for styling the input, and instead using rem or another relative length unit.
This is why you're having trouble with mobile/desktop scaling: because the scale of the viewport width/height is so different between devices.
Using for example height: 1.25rem keeps the height relatively static across devices, depending on the root font-size property at a given breakpoint.
Assigning a rem value as the font-size of the input itself will likewise scale with the root element's font-size, and make it easier for you and other developers to understand the relationship between the input's height and its font-size.
Example:
/* Let's say the <body> has a font-size of 20px */
body {
font-size: 20px; /* 20px = 1rem */
}
.pickthetime {
font-size: 1rem; /* or 1x body's font-size = 20px */
height: 1.5rem; /* or, 1.5x body's font-size = 30px */
/* I would suggest not setting a width; if you do,
set a max-width as well, or style the containing
element with a set width/max-width */
width: 100%;
max-width: 300px;
}
In the above example, you can now tell that the font size will be the same as the rest of the text, and also that the height of the input element will be 1 and a half times the size of your text.
If you set the height of the field based on vh, you need to set the font size the same way. Font size is a height, not a width. If you set the width, depending on the width of the form field your text will either be too tall or too short for the box. I'm not really sure how you would want the form field to look when the shape of the text doesn't match the geometry of the form field.
I know this isn't really an answer, but the problem you've described has no solution. For a change that would help you can refer to another answer but I don't want to just say "Do this instead" because there are a lot of options depending on what you want.
I have the following img tag, which sits inside a container with 30 pixels of horizontal padding. It is therefore designed to show a 640-pixel wide image if the screen is >=670 pixels wide, and otherwise a 320-pixel wide image:
<img srcset="TestImage320.png 320w, TestImage640.png 640w"
sizes="(max-width: 669px) 320px, 640px"
src="TestImage320.png">
However, the 640-pixel image is simply a manually scaled-up version of the 320-pixel image. Is it possible to achieve the same effect without creating (and requiring users to download) the 640-pixel image?
Essentially, my current approach chooses between src="TestImage320.png" and src="TestImage640.png" values depending on the available width. Instead, I want to keep src="TestImage320.png" and choose between style="width: 320px" and style="width: 640px". How can I achieve this (or something equivalent)?
If you try to scale up an image, it will look bad. You can scale down better and still keep some nice quality.
I would only include the 640px version. Throw a max-width: 640px; width: 100%; and watch it scale down perfectly.
Unless you are significantly worried about load time it is often best to use the largest image you need (in your case 640px) and then scale it down to 320px. Keep in mind with the prevalence of retina displays it is recommended that you double the resolution of your image so it still looks nice on those displays. But again it's a load time vs image quality question, though an image at 1280px shouldn't be a super huge file.
Use this style on your image it will scale and keep integrity according to width.
.imageClass{
width:100%
height:auto;
float:left;
}
If you need it to remain a certain height this will keep integrity according to height.
.imageClass{
width:auto;
height:100%;
float:left;
}
File HTML:
<div class="text-img">
<img src="text.jpg" alt="text" title="text" />
</div>
File CSS:
.text-img {width:100%;max-width:640px;overflow:hidden;}
.text-img img {min-height:100%;}
I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,
<style>
#canvas {
width: 800px;
height: 600px;
}
</style>
<canvas id="canvas"></canvas>
In contrast with this approach (that works as expected):
<canvas id="canvas" width="800px" height="600px"></canvas>
Think about what happens if you have a JPG that is 32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appear as width:800px; height:16px. The same thing applies to HTML Canvas:
The width and height attributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
"the width attribute defaults to 300, and the height attribute defaults to 150."
The width and height CSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.
If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/
The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width as seen in another post, thanks!
The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
The best way to size your canvas is to include in a div and style your div with the size that you want.
Here is the CSS
<style>
#divCanvas{
width: 800px;
height: 600px;
}
</style>
Here is the HTML
<div id="divCanvas">
<canvas id="canvas"></canvas>
</div>
I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,
<style>
#canvas {
width: 800px;
height: 600px;
}
</style>
<canvas id="canvas"></canvas>
In contrast with this approach (that works as expected):
<canvas id="canvas" width="800px" height="600px"></canvas>
Think about what happens if you have a JPG that is 32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appear as width:800px; height:16px. The same thing applies to HTML Canvas:
The width and height attributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
"the width attribute defaults to 300, and the height attribute defaults to 150."
The width and height CSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.
If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/
The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width as seen in another post, thanks!
The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
The best way to size your canvas is to include in a div and style your div with the size that you want.
Here is the CSS
<style>
#divCanvas{
width: 800px;
height: 600px;
}
</style>
Here is the HTML
<div id="divCanvas">
<canvas id="canvas"></canvas>
</div>
I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?
Wrap them in a container with the dimensions you want and overflow: hidden.
This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best
I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.
If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php
In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.
Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.