Why SVG doesn't scale correctly in canvas (it is all pixelated and blurry) ?
What am I doing wrong ?
All I want is the SVG image to keep it's aspect ratio whatever the canvas size, and alose not have it becoming blurry.
var canvas = document.getElementById("screen"),
ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://imgh.us/perso.svg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#screen {
display: block;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Game</title>
</head>
<body>
<canvas id="screen"></canvas>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>
Your problem isn't with the SVG, it's with the canvas.
Canvases have a default size of 300 × 150. The first thing, wich runs is the script, it creates the canvas context, wich is 300 × 150. Then CSS comes, and scales the canvas element to 100% in each direction. The context is still 300 × 150. This makes every pixel take up more than 1 pixel area. You need to make sure your script runs after the CSS or you need to use javascript, to resize the canvas.
I think you can put the SVG inside a div and then blur the div,so it will get the same effect
https://jsfiddle.net/moongod101/q3qh78xd/
Related
I have a set of thumbnail images whose width resizes with the size of the screen. They have a max-width but the height is unstated at present. The images all end up having the same width but differing heights which is half correct.
Essentially I would like them to be contained within a square and as the width changes then the height should change to be the same as the width with the image inside adjusting itself to maintain the aspect ratio. I currently have a set max-height and max-width but that doesn't maintain a 1:1 ratio of the container. The images themselves are not square.
The idea is that I will have multiple images next to each other. If I am not mistaken css vars cannot be tied to variables that haven't been expressly declared. SO to use javascript?
.product-single__thumbnail-image {
max-width: 100%;
max-height: 123px;
display: block;
margin: 0 auto;
padding: 2px;
}
<li>
<img class="product-single__thumbnail-image" src="//someting.jpeg">
</li>
hey did u mean something like this?
i used javasrcipt tho so i dont know if it counts as an aswer to ur question sry
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#image {
object-fit: cover;
width: 100%;
}
</style>
</head>
<body>
<div>
<img src="http://i.stack.imgur.com/aEEkn.png" alt="" id='image'>
</div>
<script>
const image = document.getElementById('image')
image.height = `${image.width}`
window.addEventListener('resize',()=>{
image.height = `${image.width}`
})
</script>
</body>
</html>
This is an svg image loaded onto the canvas. As you can tell, it looks very much like a raster image. To give a little more context, the light blue box is 1000px by 400px.
Notice also the image of the IText object looks like a raster image instead of a vector image.
Anyone know what's happening here and how to fix it?
---update---
Sorry, this took so long to get out... I got side tracked, but as requested:
<html>
<head>
<title>
Debug Me
</title>
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Path to fabric.js-->
<script type='text/javascript' src="./CreekWareJava/fabric.js-3.6.3/dist/fabric.js"></script>
<!--bootstrap related-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" id="canvas_container">
<canvas id="canvas">
Canvas is not supported by this browser! Please upgrade your browser.
</canvas>
</div>
</div>
</div>
<style>
#canvas_container
{
display: flex !important;
justify-content: center !important;
}
canvas
{
position: absolute !important;
height: 100% !important;
width: 100% !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.canvas-container
{
width: 1000px !important;
height: 400px !important;
border: 5px solid green !important;
position: relative !important;
}
</style>
<script>
window.onload = function()
{
canvas = new fabric.Canvas('canvas');
// – Raman Nikitsenka's proposal
// it shouldn't hurt to have it in here...
fabric.Object.prototype.objectCaching = false;
//Adding some text
addText("Some text");
addImage("http://fabricjs.com/assets/1.svg");
}
function addText(text)
{
var canH = canvas.getHeight() / 2;
var canW = canvas.getWidth() / 2;
var text = new fabric.IText(text, { left: canW, top: canH, fill: "Black", textAlign: 'center' });
text.originX = 'center';
text.originY = 'center';
canvas.add(text);
canvas.bringToFront(text);
canvas.requestRenderAll();
}
function addImage(source)
{
fabric.loadSVGFromURL(source ,function(objects,options) {
var loadedObjects = fabric.util.groupSVGElements(objects, options);
loadedObjects.set({
width: 200,
height: 200
});
canvas.add(loadedObjects);
canvas.renderAll();
});
}
</script>
</body>
</html>
This is the simplified code. As you can tell when you load it, both the svg and the text will come out very blurry. When you resize the dragon or the text, you can tell that it is trying to render it but doesn't do so properly.
Some additional observations:
fabric.js takes the initial canvas element and creates 2 new canvases, then wraps them in a div with a class called .canvas-container. I have a wrapper div for that container with id #canvas_container.
-- Update again... --
I added the following code to the window.onload eventlistener directly after the new fabric object...
for (var i = 0; i < 4; i++)
{
canvas.setHeight(document.getElementById('canvas').height);
canvas.setWidth(document.getElementById('canvas').width);
canvas.requestRenderAll();
console.log(i, "fw", canvas.width, "fh", canvas.height, "cw", document.getElementById("canvas").width, "ch", document.getElementById("canvas").height, "fr", canvas.width / canvas.height, "cr", document.getElementById("canvas").width / document.getElementById("canvas").height);
}
My observations from this are that the more I increase the counter for the loop, the better the image quality and text quality. On the other hand however, it will make the resize boxes and bounding box much thinner and decrease the physical size of the objects. The console will output fabric's canvas's width and height, then the physical html canvas element's width and height, followed by the ratios of each respectively. Thoughts?
So the problem is that fabric.js checks the tag for a width and height to initialize the new fabric canvas to, and if you don't include it in the tag, it won't render the canvas properly. To fix it, you can use
canvas.setHeight(document.getElementById("your_canvas_id").style.height);
canvas.requestRenderAll();
and likewise for the width.
Fabric.js changes my canvas size to 300x150 after initialization is another resource for this question.
I basically have a group of images of unknown sizes. Some may have a width > height and vice versa.
I need to display these items scaled to fit in a 300x300 box. Some of these images are smaller than 300x300 and need scaled up and some are larger and need scaled down.
So basically if I have an image that is 100x200, I need it to display at 150x300 and if I have an image that is 800x400 it needs to display as 300x150.
ie one of the dimension need to be fit on the box and other dimension
need to be resize as aspect ratio.
Since this is a user selected object in a database, I initially tried this in javascript but I'm struggling. I'm curious if there's a purely CSS way to do this.
Hello You can use below code only use css and javascript
which will maintain your aspect ration also
<style type="text/css">
.image_box{
width: 300px;
height: 300px;
background: #FF0;
}
</style>
<div class="image_box">
<img src="1.jpg" id="imageid">
</div>
<script type="text/javascript">
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
//alert(width);
//alert(height);
if(width>height){
img.style.width = '300px';
}else{
img.style.height = '300px';
}
</script>
There are 2 ways you can do this with pure CSS.
Option 1: CSS Background-Image (Recomended)
You can set the image to the background of a div and then set the div's height to the desired dimensions.
<div class="background"></div>
.background {
background-image: url("SOMEURL");
background-size: cover;
background-position: center center;
width: 150px;
height: 300px;
}
You can set the background-size to cover to scale the background image so it takes up the available width or height.
This method is recommended due to better browser support (IE 9+)
Demo: http://codepen.io/aaronvanston/pen/NbrYWM
Option 2: Using an Image and setting object-fit
You can use a normal image instead
<img src="SOMEURL" class="fit-image" >
.fit-image {
width: 150px;
height: 300px;
object-fit: cover;
}
Demo: http://codepen.io/aaronvanston/pen/gLMeMX
This does the same thing as the background image however it's using an image element. However, this method isn't as supported. (no support for IE) http://caniuse.com/#feat=object-fit
The solution is a combination of two main features;
Using a transparent gif or png image, sized at 300x300px
css for the background image and using the background-size:contain property value.
Here's an example where i have used a 100x200 image and a 800 x 400 image.
http://codepen.io/partypete25/pen/ZBOxKg/
The benefit of not specifying the width and height (using a transparent image to maintain the correct aspect ratio) is that you can use this implementation in a responsive build.
Method1 with simple css: (this way small pics will not scale up to container)
<div style="width:300px; height:300px; border:2px solid black;">
<img src="images/p1.jpg" style="max-width:300px; max-height:300px;" />
</div>
Update Method 2: (this use background-image and works also for small pics, it is ok for modern browsers including IE9+)
<html>
<head>
<style type="text/css">
.divImg {
width:300px; height:300px; border:2px solid black;
background-repeat: no-repeat;
background-size: contain; /* IE9+ compatible */
}
</style>
</head>
<body>
<div class="divImg" style="background-image:url(p1.jpg)">
</div>
</body>
</html>
I would do something like this. I hope this solution helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.img-cont {
border: solid 1px red;
width: 300px; /* reference border */
height: 300px;
}
</style>
</head>
<body>
<!-- images with different dimensions -->
<div class="img-cont"><img src="https://dummyimage.com/800x400/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/400x800/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/100x200/000/fff" alt=""/></div>
<div class="img-cont"><img src="https://dummyimage.com/200x100/000/fff" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
// max image width/height that we want
var maxWidthAllowed = 300,
maxHeightAllowed = 300;
function loadImg(imgObj) {
$('.img-cont img').one("load", function() {
var imgWidth = $(this).get(0).naturalWidth,
imgHeight = $(this).get(0).naturalHeight,
coeff = imgWidth/imgHeight; // get image proportion
if(parseFloat(coeff) > 1) {
// wide image
// resize proportionately
$(this).css({
'max-width': maxWidthAllowed,
'width': '100%',
'height' : 'auto'
});
} else {
// thin image
// resize proportionately
$(this).css({
'max-height': maxHeightAllowed,
'height': '100%',
'width' : 'auto'
});
}
}).each(function() {
if(this.complete) $(this).load();
});
}
loadImg();
})(jQuery);
</script>
</body>
</html>
I was trying to put a canvas in a container. I wanted the canvas to have the same size as the container. To do this I used JQuery, however, this turned out to scale my canvas. This was not my intention, especially because I draw after resizing. Doing seemingly the same thing in good old fashion JavaScript gives me the expected result.
I personally did not expect the JQuery result and it took some time before I figured out the problem. Does anybody know why they opted for this implementation and why it gives a different result? I hope by sharing this I can save some people a lot of time!
Thanks for anybody willing to research this further of fix this!
Here is some example code:
<html>
<head>
<title>Canvas resizing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
#container1{
background-color: green;
width: 100px;
height: 100px;
margin: 50px auto;
}
#container2{
background-color: red;
width: 100px;
height: 100px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="container1">
<canvas></canvas>
</div>
<div id="container2">
<canvas></canvas>
</div>
<script type="text/javascript">
function draw (canvas) {
var context=canvas.getContext("2d");
context.lineWidth = 5;
context.rect(25,25,50,50);
context.stroke();
}
$(document).ready(function () {
//javascript
var container = document.getElementById('container1');
var canvas = container.childNodes[1];
canvas.width = 100;
canvas.height = 100;
draw(canvas);
//jquery
var container = $('#container2');
var canvas = container.children()[0];
$(canvas).width(100);
$(canvas).height(100);
draw(canvas);
});
</script>
</body>
</html>
The jQuery width and height methods are shorthand aliases for setting the CSS width and height properties. Sizing a canvas using CSS causes the scaled, distorted look you're seeing. Your pure javascript version of the code is setting the width and height attributes of the canvas element. To achieve the same in jQuery you can use:
$(canvas).prop('width', 100)
$(canvas).prop('height', 100)
JSFiddle
I am quite new to HTML and am not very fluent in HMTL terminology (English as well :). I am trying to create presentation slide (something like Powerpoint in MS Office). The functionality should be:
Everything (text, pictures, etc.) inside the slide must stay in position, size and ratio relative to the slide while the slide resizes.
The slide has 4:3 resolution.
The slide should be realized by <div> element.
The slide stays in the middle of the screen.
No inline styles should have to be used inside the slide.
Plain Javascript, css and HTML must be used.
So far I have managed to devise this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Image Resize Test
</title>
<style type="text/css">
*
{
margin: 0;
}
body
{
background-color: black;
width: 100%;
height: 100%;
}
#wrapper
{
font-size:100%;
background-color: white;
display: block;
position: absolute;
left: 50%;
}
#content
{
font-family:"Times New Roman";
font-size:80%;
}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
<script>
window.onload = function()
{
window.onresize();
}
window.onresize = function()
{
var width = window.innerWidth;
var height = window.innerHeight;
if (width / 4 > height / 3)
{
width = height / 3 * 4;
}
else
{
height = width / 4 * 3;
}
var wrapper = document.getElementById("wrapper");
wrapper.style.height = height + "px";
wrapper.style.width = width + "px";
wrapper.style.marginLeft = (-width/2) + "px";
wrapper.style.fontSize = (height) + "%";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<H1>
aaaa
</H1>
<H2>
bbbb
</H2>
<p>cccc</p>
text
</div>
</body>
</html>
Is this a good solution to my problem or are there simpler/more efficient/more robust or more "pro" ways to do this?
Could it be solved without the Javascript? Atleast partially.
Is there a way to easily specify x/y offset relative to the side for any element within the slide (perhaps as attribute)?
How to apply styles for elements that would be variably deep within the slide element tree?
Help on any of the things I ask would be appreciated.
this is basically same as yours but without explicitly setting margin in javascript. so remove that part and make margin: 0 auto; at wrapper.
http://jsfiddle.net/btevfik/VuqJX/
it seems like you can keep the aspect ratio with only css and html but as far as i can tell this only works when you resize width of the window. when you change height it wont work.
Maintain the aspect ratio of a div with CSS