We Keep Coding

Animate drawing of path on HTML5 canvas

My problem is how to animate the drawing of a path between two points.
Consider a curved line or path between two points, A & B. I can draw this easily on the canvas using the line drawing functions in Konvajs.
However, what I actually want is to animate the revealing of the line so that it starts from point A and progressively draws to point B. The reveal should be animated so I can apply pleasing easings.
As a comparable example, see the brief video on this site https://coggle.it/ where the video shows the creation of a new box and the line draws to connect it to the old.

Here is a potential answer (special thanks to #markov00 re same technique in SVG). It works by manipulating the path dashOffset and dash attributes. There is an excellent explanation of the technique here in a post by Jake Archibald which also includes an interactive experiment with sliders which I found very useful.
I have tried to make the demo as lightweight as possible and just show the technique - though I added a slider and some UI to help understand the process. The use of jquery is only for the UI parts which are not needed for the technique.
Couple of points:
The demo here uses a path from 3 straight line segments. But I tried curves and combination paths and the technique works in those cases too - so any path should work.
I found that using a close-path command (z) on the path caused the path length function to be short on the true distance. This appears as an amount of the path remaining stroked or gapped at either end, with the size depending on the jump between first & last to close the path.
The path length is virtually always going to be decimal so don't try to do everything as integers as you will ultimately find your stroke is slightly overlong or short.
To adopt this for animation and easing etc, take the couple of lines from the slider change event and stick them inside the frame callback, manipulating the maths to suit your case.
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 320, height: 180});
// Add a layer
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
// show where the start of the path is.
var circle = new Konva.Circle({
x: 66,
y: 15,
radius: 5,
stroke: 'red'
})
layer.add(circle);
// draw a path.
var path = new Konva.Path({
x: 0,
y: 0,
data: 'M66 15 L75 100 L225 120 L100 17 L66 15',
stroke: 'green'
});
// get the path length and set this as the dash and dashOffset.
var pathLen = path.getLength();
path.dashOffset(pathLen);
path.dash([pathLen]);
layer.add(path)
stage.draw();
// Some UI bits
$('#dist').attr('max', parseInt(pathLen)); // set slider max to length of path
$('#pathLen').html('Path : ' + pathLen); // display path length
// jquery event listener on slider change
$('#dist').on('input', function(){
// compute the new dash lenth as original path length - current slider value.
// Means that dashLen initially = path len and moves toward zero as slider val increases.
var dashLen = pathLen - $(this).val();;
path.dashOffset(dashLen); // set new value
layer.draw(); // refresh the layer to see effect
// update the UI elements
$('#dashLen').html('Dash: ' + dashLen);
$('#pathPC').html(parseInt(100-(100 * (dashLen/pathLen)), 10) + '%');
})
.info
{
padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div class="slidecontainer">
<input class='slider' id='dist' type="range" min="0" max="100" value="0" class="slider" id="myRange"/>
<span class='info' id='pathPC'></span>
<span class='info' id='pathLen'></span>
<span class='info' id='dashLen'></span>
</div>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>

My solution with animation:
var width = window.innerWidth;
var height = window.innerHeight;
// Set up the canvas / stage
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
// Add a layer
var layer = new Konva.Layer({
draggable: false
});
stage.add(layer);
// show where the start of the path is.
var circle = new Konva.Circle({
x: 66,
y: 15,
radius: 5,
stroke: 'red'
})
layer.add(circle);
// draw a path.
var path = new Konva.Path({
x: 0,
y: 0,
data: 'M66 15 L75 100 L225 120 L100 17 L66 15',
stroke: 'green'
});
// get the path length and set this as the dash and dashOffset.
var pathLen = path.getLength();
path.dashOffset(pathLen);
path.dash([pathLen]);
// make some animation with stop
var anim = new Konva.Animation(function (frame) {
var dashLen = pathLen - frame.time / 5;
path.dashOffset(dashLen);
if (dashLen < 0) {
anim.stop();
}
}, layer);
anim.start();
layer.add(path)
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>

And here is an alternative to #Roxane's animated version but using a tween.
var width = window.innerWidth;
var height = window.innerHeight;
// Set up the canvas / stage
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
// Add a layer
var layer = new Konva.Layer({
draggable: false
});
stage.add(layer);
// show where the start of the path is.
var circle = new Konva.Circle({
x: 66,
y: 15,
radius: 5,
stroke: 'red'
})
layer.add(circle);
// draw a path.
var path = new Konva.Path({
x: 0,
y: 0,
data: 'M66 15 L75 100 L225 120 L100 17 L66 15',
stroke: 'green'
});
// get the path length and set this as the dash and dashOffset.
var pathLen = path.getLength();
path.dashOffset(pathLen);
path.dash([pathLen]);
layer.add(path); // have to add to layer for tweening.
// create the tween
var tween = new Konva.Tween({
node: path,
dashOffset: 0,
easing: Konva.Easings['BounceEaseOut'],
duration: 1.5
});
tween.play(); // execute the tween
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>

Fabric js how to add text on image

I need to add text on img object
my code
$("#c2").click(function(){
fabric.Image.fromURL('/some/link/free_circle_2.png', function(img){
img.setWidth(50);
img.setHeight(50);
canvas.add(img);
});
});
after adding image i need add number centered of this image.
I know i need to change canvas.add(img); to canvas.sendToBack(img); but how to add text keeping the position of the image

To keep the position of your text, based upon the position of your image, you should use a Group, like this:
var group = new fabric.Group([img, text], {
left: 150,
top: 100,
});
Then to place your text in the middle of your image, since the position of your text its relative to the group, you should do something like this:
text.set("top", (img.getBoundingRect().height / 2) - (text.width / 2));
text.set("left", (img.getBoundingRect().width / 2) - (text.height / 2));
Where getBoundingRect returns coordinates of object's bounding rectangle (left, top, width, height)
then,
Try yourself the following runnable example if it meets your needs:
var canvas = new fabric.Canvas('c');
$("#c2").click(function() {
fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/2/25/Herma_of_Plato_-_0049MC.jpg', function(img) {
img.setWidth(100);
img.setHeight(100);
var text = new fabric.Text("01", {
fontFamily: 'Comic Sans',
fontSize: 20
});
text.set("top", (img.getBoundingRectHeight() / 2) - (text.width / 2));
text.set("left", (img.getBoundingRectWidth() / 2) - (text.height / 2));
var group = new fabric.Group([img, text], {
left: 100,
top: 25,
});
canvas.add(group);
});
});
canvas {
border: 1px dashed #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c' width=300 height=150 '></canvas>
<br>
<button id='c2'>ok</button>

How to stretch text value in konvaJS to certain width and height?

In KonvaJS Text Object there is a property fontSize like fontSize: 30 but I need to stretch the text according the width and height I give for it.
Here what I wrote:
var textX = new Konva.Text({
text: 'X',
align: 'center',
x: 60,
y: 60,
width: 60,
height: 40
});
What do you suggest to let the code work?

Text fonts may not incrementally scale to exactly fit a desired width, but you can come close.
Create an in-memory canvas element,
Measure your text at a certain px testFontsize (almost any reasonable test size will do),
The needed font size is: testFontsize*desiredWidth/measuredWidth,
Set the needed px font size in your Konva.Text.
Notes: Some fonts do not scale with decimal precision so you might have to .toFixed(0) the resulting scaled font size. Some fonts may not incrementally scale at all and you will get the nearest available font size -- which might not fill the desired width well.
Example code:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// define the desired text, fontsize and width
var text='Scale Me';
var fontface='verdana';
var desiredWidth=60;
$myslider=$('#myslider');
$myslider.attr({min:30,max:200}).val(desiredWidth);
$myslider.on('input change',function(){
desiredWidth=parseInt($(this).val());
ctx.clearRect(0,0,cw,ch);
draw(text,fontface,desiredWidth)
});
draw(text,fontface,desiredWidth);
function draw(text,fontface,desiredWidth){
// calc the scaled fontsize needed to fill the desired width
var scaledSize=scaledFontsize(text,fontface,desiredWidth);
// Demo: draw the text at the scaled fontsize
ctx.font=scaledSize+'px '+fontface;
ctx.textAlign='left';
ctx.textBaseline='middle';
ctx.strokeRect(0,0,desiredWidth,100);
ctx.fillText(text,0,50);
ctx.font='14px verdana';
ctx.fillText(scaledSize+'px '+fontface+' fits '+desiredWidth+'px width',10,125);
}
function scaledFontsize(text,fontface,desiredWidth){
var c=document.createElement('canvas');
var cctx=c.getContext('2d');
var testFontsize=18;
cctx.font=testFontsize+'px '+fontface;
var textWidth=cctx.measureText(text).width;
return((testFontsize*desiredWidth/textWidth));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Desired Width:&nbsp<input id=myslider type=range><br>
<canvas id="canvas" width=300 height=256></canvas>

Hole in rectangle by SVG Path in KineticJS

globalCompositeOperation with KineticJS describes how to make a hole in a rectangle by a circle. Instead of a circle I would like to use SVG path to make the hole, such as:
m 876.30799 492.53209 c -36.64554 -0.29484 -69.69962 33.8121 -67.84069 70.49382 3.60444 27.60835 34.32996 46.34894 60.8096 40.13747 10.35153 -2.31261 21.0251 -4.39193 30.54799 -9.18203 10.45071 -6.35814 19.46448 -14.76346 29.73686 -21.39213 10.83886 -8.06083 21.32637 -16.94052 29.19035 -28.02964 -1.53049 -9.55445 -13.2442 -8.25504 -20.39998 -9.87533 -12.44629 -2.06296 -25.58989 -5.04642 -34.93228 -14.14783 -10.44361 -7.80509 -20.00756 -17.00681 -27.11185 -28.00433 z
How can I implement the hole, i.e. context.globalCompositeOperation="destination-out";, into the new Kinetic.Path({ data: path });?
EDIT: I have just found an updated version of the circular hole here:
use globalcompositeoperations on KineticJS 4.7.2
Now it is just a question of making it work for SVG path ;)

Using an SVG drawing to reveal an obscured image is fairly complicated.
Here are the steps required:
Create a background layer with an image
Create a foreground layer
Create a rectangle covering the foreground to obscure the background image
Create a Kinetic.Path with SVG data
Convert that SVG path to an image using path.toImage
Create a Kinetic.Shape that draws the SVG image using "destination-out" compositing to reveal the background
The Kinetic.Shape is not draggable, so create another Kinetic.Path with the same SVG data to act as a handle to drag the revealing Kinetic.Shape. When this path-handle is dragged, move the revealing shape to the same coordinates.
Demo: http://jsfiddle.net/m1erickson/7Yvt5/
This demo uses a simple SVG rectangle, but you can use any SVG drawing that you need.
Here is example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var bklayer = new Kinetic.Layer();
stage.add(bklayer);
var layer = new Kinetic.Layer();
stage.add(layer);
var path;
var reveal;
var cutoutImage;
//var pathData="M 0,0 L50,0 50,50 0,50 z";
var pathData="M 0,0 L50,0 50,50 0,50 z";
var img=new Image();
img.onload=function(){
start();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function start(){
var image=new Kinetic.Image({
x:0,
y:0,
width:300,
height:300,
image:img
});
bklayer.add(image);
bklayer.draw();
var rect = new Kinetic.Rect({
x: 0,
y: 0,
width: 300,
height: 300,
fill: 'skyblue',
stroke: 'lightgray',
strokeWidth: 3
});
layer.add(rect);
// path filled
var path = new Kinetic.Path({
x: 0,
y: 0,
data:pathData,
fill: 'green',
});
layer.add(path);
// turn the path into an image
cutoutImage=path.toImage({
callback: function(img){
reveal = new Kinetic.Shape({
sceneFunc: function(context) {
var ctx=this.getContext()._context;
var pos=this.pos;
ctx.save();
ctx.globalCompositeOperation="destination-out";
ctx.drawImage(this.image,pos.x,pos.y);
ctx.restore();
},
});
reveal.pos={x:0,y:0};
reveal.image=img;
reveal.position(path1.position());
layer.add(reveal);
// remove the original path
path.remove();
layer.draw();
}
});
// draggable path
path1 = new Kinetic.Path({
x: 0,
y: 0,
data:pathData,
stroke: 'red',
draggable:true
});
path1.on("dragmove",function(){
reveal.pos=this.position();
layer.draw();
});
layer.add(path1);
layer.draw();
} // end start
function addReveal(img){
reveal = new Kinetic.Shape({
sceneFunc: function(context) {
var ctx=this.getContext()._context;
var pos=this.pos;
ctx.save();
ctx.globalCompositeOperation="destination-out";
ctx.drawImage(this.image,pos.x,pos.y);
ctx.restore();
},
});
reveal.pos={x:0,y:0};
reveal.image=img;
reveal.position(path1.position());
layer.add(reveal);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

How to get a rotated crop of an image with HTML canvas

I have a large canvas containing an image, as shown in the example below:
I have the position and rotation angle of the red rectangle:
red : {
top : top,
left : left,
width : width,
height : height,
angle : angle
}
I also have a full set of translated coordinates denoting the actual corner points of the red rotated rectangle.
Finally, I have the position of the blue rectangle relative to the red rectangle:
blue : {
left : left,
top : top,
width : width,
height : height
}
What I need to do is create a new canvas that is the size of the blue rectangle. The new canvas should contain the correctly rotated portion of the image that is contained within the blue rectangle. The resulting image should look like this:
Here is my JavaScript code so far:
var c = getCenterPoint(); // returns center x/y positions of the RED rectangle
canvas.width = blue.width;
canvas.height = blue.height;
var blueX = red.left + blue.left;
var blueY = red.top + blue.top;
var tx = blueX - c.x;
var ty = blueY - c.y;
this.cursorContext.translate(tx, ty);
this.cursorContext.rotate(angle * (Math.PI / 180));
this.cursorContext.translate(-tx, -ty);
this.cursorContext.drawImage(image, -blueX, -blueY, blue.width, blue.height);
The problem I am having is getting the correct portion of the image when the rectangle is rotated. How can I do this?

You can use a temporary canvas to clip and unrotate your blue box
Clip the boundingbox of the blue rectangle from the image
Unrotate the boundingbox so the blue rectangle is unrotated (angle==0)
Clip the extra boundingbox area away to reveal only the blue rectangle
Draw the blue rectangle to the display canvas
Here’s code and a Demo: http://jsfiddle.net/m1erickson/28EkG/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// blue rect's info
var blueX=421;
var blueY=343;
var blueWidth=81;
var blueHeight=44;
var blueAngle=-25.00*Math.PI/180;
// load the image
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp6.jpg";
function start(){
// create 2 temporary canvases
var canvas1=document.createElement("canvas");
var ctx1=canvas1.getContext("2d");
var canvas2=document.createElement("canvas");
var ctx2=canvas2.getContext("2d");
// get the boundingbox of the rotated blue box
var rectBB=getRotatedRectBB(blueX,blueY,blueWidth,blueHeight,blueAngle);
// clip the boundingbox of the rotated blue rect
// to a temporary canvas
canvas1.width=canvas2.width=rectBB.width;
canvas1.height=canvas2.height=rectBB.height;
ctx1.drawImage(img,
rectBB.cx-rectBB.width/2,
rectBB.cy-rectBB.height/2,
rectBB.width,
rectBB.height,
0,0,rectBB.width,rectBB.height
);
// unrotate the blue rect on the temporary canvas
ctx2.translate(canvas1.width/2,canvas1.height/2);
ctx2.rotate(-blueAngle);
ctx2.drawImage(canvas1,-canvas1.width/2,-canvas1.height/2);
// draw the blue rect to the display canvas
var offX=rectBB.width/2-blueWidth/2;
var offY=rectBB.height/2-blueHeight/2;
canvas.width=blueWidth;
canvas.height=blueHeight;
ctx.drawImage(canvas2,-offX,-offY);
} // end start
// Utility: get bounding box of rotated rectangle
function getRotatedRectBB(x,y,width,height,rAngle){
var absCos=Math.abs(Math.cos(rAngle));
var absSin=Math.abs(Math.sin(rAngle));
var cx=x+width/2*Math.cos(rAngle)-height/2*Math.sin(rAngle);
var cy=y+width/2*Math.sin(rAngle)+height/2*Math.cos(rAngle);
var w=width*absCos+height*absSin;
var h=width*absSin+height*absCos;
return({cx:cx,cy:cy,width:w,height:h});
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>