trying to draw a simple circle .but it is getting distorted .and the color is also fade.why is that happening?
<html>
<body>
<script>
function makeit(){
var canvas=document.createElement('canvas');
var atts=document.createAttribute('style');
atts.value="width:400px;height:400px;border:1px solid black;";
canvas.setAttributeNode(atts);
document.body.appendChild(canvas);
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="black";
ctx.arc(100,100,25,0,2*Math.PI);
ctx.stroke();
}
window.onload=makeit;
</script>
</body>
</html>
this is because you set the width and height over the style object.
try canvas.width= canvas.height=
style.width style.height defines the appearance of canvas in the html dom.
canvas.width canvas.height defines the canvas width and height...
for example if you define a canvas width and height with 400 and 400. and you want canvas to show with 800px width and 800 px height over the style object. it gets distorted because of resizing to bigger multiplied each dimension by 2.
normally its 1 to 1
Related
I have toDataURL which I want drawn on a new canvas, which is 300 by 300 in size. The image doesn't stretch over the full space provided. I want it to be stretched over the canvas fully. Even appending to a div is okay which I tried but didn't work out, it also didn't fully occupy the space.The orginal image is anyway less than 300 and 300.Also when I remove the alert code doesn't function at all.
var c4 = document.getElementById("area_c4");
var ctx4 = c4.getContext("2d");
var dataURL = c2.toDataURL();
var myImg = new Image;
myImg.src = dataURL;
myImg.width = c4.width; // c4.width is 300px
myImg.height = c4.height; //c4.height is 300px
alert(c4.width); // when I remove this alert code doesn't work
ctx4.drawImage(myImg,0, 0 ,c4.width,c4.height); // the image doesnt strtch over 300px 300px region. It is displayed in its original size
To resize the image you will have to use the following version of CanvasRenderingContext2D.drawImage()
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
image: An element to draw into the context.
sx: The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy: The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sWidth: The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
sHeight: The height of the sub-rectangle of the source image to draw into the destination context.
dx: The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dy: The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dWidth: The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dHeight: The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
Also you will have to wait for the image to process the data uri before you can draw it onto the canvas. For this you can use the load event:
myImg.onload = function() {
// here you can draw the image on the canvas
}
The input image in the example is 10x10 pixels wide and will be stretched to 300x300 pixels.
const c4 = document.getElementById("area_c4");
var ctx4 = c4.getContext("2d");
var dataURL = "data:image/bmp;base64,Qk26AQAAAAAAAHoAAABsAAAACgAAAAoAAAABABgAAAAAAEABAAATCwAAEwsAAAAAAAAAAAAAQkdScwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAA==";
var myImg = new Image();
// wait until the data uri has been processed
myImg.onload = function() {
// draw the image and scale it to the size of the canvas
ctx4.drawImage(this,
0, 0, this.width, this.height, /* source */
0, 0, c4.width, c4.height); /* destination */
}
myImg.src = dataURL;
/* not necessary for the solution, just to show the size of the input image */
document.getElementById("showcase").src = dataURL;
canvas {
width: 300px;
height: 300px;
}
<p>
<!-- not necessary for the solution, just to show the size of the input image -->
Input:<br /><img id="showcase" />
</p>
<p>
Output:<br /><canvas id="area_c4" width="300px" height="300px"></canvas>
</p>
When programming in HTML canvas, the js dimensions of the canvas don't always match the css dimensions.
Why is this happening and how can I fix this?
I've found the problem. I was setting the dimensions of the using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
http://jsfiddle.net/h2yJn/66/
You can try to set the width and height of the canvas to be equal to the dimensions of the window object:
function createCanvas() {
var ctx = //the canvas context;
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//your code
}
In addition, it is a good idea to set the body and html tags to the full width of the window:
body, html{
height: 100%;
width: 100%;
}
You can also do this by using pure javascript and set the dimensions of the canvas in javascript depending on your CSS values:
//Get Canvas
var canvas = document.getElementById("canv");
// Get computed style of the canvas element.
var cstyle = window.getComputedStyle(canvas);
// Returns the width as str in px: e.g. 600px.
// Parse resolves that issue.
canv.width = parseInt(cstyle.width);
canv.height = parseInt(cstyle.height);
Demo:
https://jsfiddle.net/ofaghxfq/2/
I am currently having an issue when setting width and height of a svg object in fabricjs. I tried setting it like this
svg.width = 100;
svg.height = 100;
But I am not getting the result I expected. It just crops the svg instead of scaling it. So, how can I set its width and height properly?
Any help will be appreciated. Thanks!
Use scaleToWidth() and scaleToHeight() method to properly set SVG object*'s* width and height respectively.
:-: working example :-:
var canvas = new fabric.Canvas('fabric-canvas');
fabric.loadSVGFromURL('http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153', function(objects, options) {
var svg = fabric.util.groupSVGElements(objects, options);
svg.left = 50;
svg.top = 50;
svg.scaleToWidth(100);
svg.scaleToHeight(100);
canvas.add(svg);
canvas.renderAll();
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="fabric-canvas" width="200" height="200"></canvas>
Is there a native solution that provides a handle in the corner of my HTML5 canvas similar to that in a default <textarea> element.
<textarea>resizeable</textarea>
I assume this will clear the canvas and will require a redraw as this is the case when resizing the canvas programmatically with canvas.width and canvas.height.
I looked around and found nothing, but wanted to check before rolling my own. If anyone is sure that there is no "easy" way, then that is a perfectly acceptable answer. Thanks!
The best I could come up with was use jQueryUI Resizable like so
jsFiddle : https://jsfiddle.net/n24dbaw9/
Html
<div class="resizable">
<canvas id="myCanvas"></canvas>
</div>
CSS
.resizable{
width: 400px;
height: 400px;
}
#myCanvas{
width: 100%;
height: 100%;
}
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#777";
$(function() {
$(".resizable").resizable();
});
setInterval(function(){ ctx.fillRect(0, 0, 400, 400); }, 3);
Basically I have styled the canvas to fit inside of the "resizble" div, which is set to 400 by 400 at default. The canvas has a style which is 100% width and height so when the user resizes the "resizble" div the canvas will then just stretch out.
You will want to put the canvas into a JavaScript draw() function:
function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
and your body element in css should have height and width set to 100%
No matter what I try, I can't figure out why does drawImage vertically stretch a picture. Here is the code:
<canvas id="canvas" style="padding:0;border:0;margin:0 auto;
width:320px;height:456px;z-index:0;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var d = new Image
d.src = './images/portadilla.jpg';
d.onload = function a(){context.drawImage(d, 0, 0);}
</script>
My image is 456px high and 320px wide, same as the canvas. I've tried using different images and formats, but the problem remains. How would you solve this?
Because you're not setting the size of the canvas correctly. Don't use CSS/style to set the size but use its attributes:
<canvas id="canvas" width=320 height=456 style="..."></canvas>
Your image is stretched because the default size of the bitmap for a canvas element is 300x150 pixels so if you don't set the size properly the canvas bitmap will be stretched to fit the element size set with CSS.
You can also set the size using JavaScript:
var canvas = document.getElementById('canvas');
canvas.width = 320;
canvas.height = 456;