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]
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>
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>
https://jsfiddle.net/c309a2wo/
html
<canvas id="myCanvas" width="200" height="200"></canvas>
javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
ctx.fill();
I would like to overlay an image("close_icon.png") onto a canvas in the top right corner when the mouse hovers over the canvas, and is removed again when the mouse leaves the canvas.
Jquery is available, though I couldn't find the option to add it in jsfiddle.
Visualisation:
Is there an easy way to accomplish this? Brownie points if the image can fade-in and out.
The basic idea is to wrap your canvas in a container element, then add an image in the container that is only shown on :hover.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
ctx.fill();
div {
position: relative;
display: inline-block;
}
canvas {
position: relative;
z-index: -1;
}
img {
position: absolute;
top: 4%;
right: 4%;
opacity: 0;
z-index: 2;
-webkit-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
}
div:hover img {
opacity: 1;
}
<div>
<canvas id="myCanvas" width="200" height="200"></canvas>
<img src="http://placehold.it/30x30">
</div>
Here'a working JSFiddle.
Wrap canvas it in outer container that has position, then you can position the icon wherever you want relative to the outer wrapper
HTML
<div id="canvas-wrap">
<span id="canvas-icon"></span>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
CSS
#canvas-wrap{
position:relative;
width:200px; height:200px
}
#canvas-icon{
background:yellow;
width:32px;
height:32px;
position:absolute;
top:10px;
right:10px;
z-index:10;
display:none
}
#canvas-wrap:hover #canvas-icon{
display:block
}
DEMO
You may add the <span class="cross"> using .hover:
$("#myCancas").hover(function(){$( this ).append( $( "<span class="cross"></span>" ) );});
and then style it, using CSS:
span.cross{
display: block;
width: 10px;
height: 10px;
background-image: url( path/to/cross/jpg);
}
I am trying to put an HTML5 canvas as the background of my web page. I can't get it to work no matter what I do. Does anyone know how? This is my current attempt:
<!DOCTYPE html>
<html>
<head> <title> Test </title> </head>
<style>
#bgcanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index = -1;
}
</style>
<script type="text/javascript">
function fillCanvas(){
var bg = document.getElementById("bgcanvas");
var ctx = bg.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 50, 50);
ctx = document.getElementById("screen").getContext("2d");
ctx.fillStyle = "#0000FF";
ctx.fillRect(0, 0, 500, 400);
}
</script>
<body onload="fillCanvas();">
<center>
<h1>Test Page</h1>
<canvas id="screen" width=720 height=480 style="background: black;">
Your browser sucks. Please upgrade.
</canvas>
</center>
</body>
<canvas id="bgcanvas" width=100 height=100> </canvas>
</html>
Thanks!
There are a few simple errors here you can adjust to make it work as pointed out in the various comments:
#bgcanvas {
/* ... rest not shown ... */
/* remove these unless you want the content to scale like an image:
width: 100%;
height: 100%;
*/
z-index: -1; /* change = to :. = is not supported in CSS for properties */
}
Move the canvas element inside the body tags:
...
<canvas id="bgcanvas" width=100 height=100> </canvas>
</body>
Tip: Increase the size to get better quality (you would currently scaling an "image" of 100x100 pixels to about the size of the window which will can give a poor result).
You can alternatively drop the CSS sizing and set the canvas size this way in your script before you draw anything to it:
var bg = document.getElementById("bgcanvas");
bg.width = window.innerWidth;
bg.height = window.innerHeight;