I've reviewed the other SO posts and MDN docs, etc on this but still can't figure out why my image is not appearing in the canvas. I appreciate any help on this.
HTML
<canvas id="myCanvas" style="height:500px;width:500px;border:0.5px solid #979797;"></canvas>
JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = 'http://i.imgur.com/3dItN1Y.png';
https://jsfiddle.net/rsL3vsju/
This is happening because you are setting the canvas' height and width with CSS, like this:
<canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas>
That is the wrong code. The correct way is using the height and the width attributes of the canvas, as below:
<canvas id="myCanvas" height="500" width="500" style="border: 0.5px solid #979797;"></canvas>
Related
I want to get the real object width and height while I am scaling the object. I tried with
canvas.on('object:scaling', function(e){
console.log(e.target.width*e.target.scaleX);
});
But seem that does not work properly.
Use object.getScaledWidth().
DEMO
var canvas = new fabric.Canvas("c");
var circle = new fabric.Circle({radius:100})
canvas.add(circle);
circle.on('scaling',function(){
console.log(parseInt(this.getScaledWidth()))
})
canvas{
border: 1px dotted green;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width=400 height=400></canvas>
This question already has answers here:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(10 answers)
Closed 5 years ago.
I have a canvas tag without width and height attributes. The canvas has inline width and height. Now when I apply linearGradient over it, it doesn't cover whole canvas. Demo:
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var gradient1 = ctx.createLinearGradient(0, 0, 150, 0);
gradient1.addColorStop(0, "#123456");
gradient1.addColorStop(1, "#654321");
ctx.fillStyle = gradient1;
ctx.fillRect(0, 0, 150, 100);
canvas {
border: 1px dotted red;
}
<canvas id="canvas" style="width: 150px; height: 100px;"></canvas>
Question1: Why doesn't whole 150px of canvas get covered? And if I add width="150" and height="100" attributes on canvas tag, why does it then fill whole canvas?
Question 2: In below script c.width returns 300px not 150px, why?
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
console.log(c.width);
console.log(c.height);
canvas {
border: 1px dotted red;
}
<canvas id="canvas" style="width: 150px; height: 100px;"></canvas>
Question3: Is this behavior due to something similar to svg viewBox?
I'm not sure why the inline styling isn't working, but if you change your canvas element to this:
<canvas id="canvas" width="150px" height= "100px;"></canvas>
Then the console logs the correct value and the gradient fills the canvas. :) I don't know why you can't use the other method, but I do know that everywhere I've seen I think everyone who uses the html canvas specifies the width and height in this way. (unless they specify it in the javascript)
Here's a pen of your working code: https://codepen.io/Awesomennjawarrior/pen/zwmmPY
I want to stretch the font of a canvas Text object. How can I do this?
Example (before):
Example (after):
How could I implement this?
You can use scaleX to "squish" the text by scaling the text:
// "squish" the text to 60% of its original width
scaleX:0.60
Example code and a Demo
var canvas = new fabric.Canvas('canvas');
var myText = new fabric.Text('NEW TEXT',{
left: 50,
top: 60,
});
canvas.add(myText);
var mySquishedText = new fabric.Text('NEW TEXT',{
left: 50,
top: 100,
scaleX:0.60,
});
canvas.add(mySquishedText);
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>
[Update: #AndreaBogazzi adds that scaleX is better handled than the matrix ops]
I was wondering if it's possible to clone an HTML element into canvas. So looking at this JSFiddle, how would you duplicate it into canvas?
I've seen ways to draw DOM objects into a canvas element, but I was curious if there was a way to do it differently.
<p>Html</p>
<div id="clone-me">
<div id="square">
</div>
</div>
<p>Canvas</p>
<canvas width="200" height="200"></canvas>
#clone-me {
width: 200px;
height: 200px;
background: #333;
}
#square {
width: 70px;
height: 70px;
background: red;
}
You can use html2canvas to do it, you can checkout the demo at this JSFiddle.
html2canvas(document.getElementById('clone-me'), {
onrendered: function(canvas) {
var canvas1 = document.getElementById('canvas1');
var ctx = canvas1.getContext('2d');
ctx.drawImage(canvas, 0, 0);
}
});
I wanted to draw the circular canvas and wanted to download the canvas with same format. Following is css which i am using
canvas {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red;
}
At present i have just apply the css to canvas to look a like it will not print same in fabric js.
Is there any possible way? Because i am trying to create circular canvas and add text and wanted to print same canvas with text and styling.
Edit:
Is it possible to draw the circle with same styling in fabric.js
You cannot really have a circular canvas in fabricjs, but you can clip a canvas to look like a circle.
i did a circle that has radius half of the canvas, and is positioned in the center.
Effect is same as your example.
Look the fiddle:
var canvas = new fabric.Canvas('c');
canvas.clipTo = function(ctx) {
ctx.beginPath();
ctx.arc(200,200,200,0,2*Math.PI);
}
canvas.backgroundColor = 'blue';
var rect = new fabric.Rect({width: 100, height:100, fill:'red', top:30, left:30});
canvas.add(rect);
canvas.renderAll();
<script src="http://www.fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="400" height="400" ></canvas>