I want to draw an image on the canvas. it should start with lines and it becomes an image. something like the below image (Right to left transformation example)
Beginning it should be a plane canvas. it should start from lines and eventually, it should become full image with colors. there was a jQuery plugin (which I can't find it now)
Using JS/JQuery is better. If anyone knows which plugin is that, it may also help.
or if we can do this with JS/JQuery is fine.
For this you will need 2 images: the photo and the sketch. I'm working with 2 canvases, one of which can be hidden or not attached to the DOM. But in the next example - for clarity - I have both canvases visibles. Please read the comments in the code.
window.onload = function() {
let ctx = canvas.getContext("2d");
let ctx1 = canvas1.getContext("2d");
let cw = canvas.width = canvas1.width = 225;
let ch = canvas.height = canvas1.height = 225;
// you draw the photo
ctx.drawImage(box,0,0);
//you "mask" the photo using globalCompositeOperation and a rect filled with a gradient
ctx.globalCompositeOperation = "destination-in";
let grd = ctx.createLinearGradient(cw, 0,0, 0);
grd.addColorStop(0,"rgba(0,0,0,1)");
grd.addColorStop(.75,"rgba(0,0,0,0)");
ctx.fillStyle = grd;
ctx.beginPath()
ctx.fillRect(0,0,cw,ch)
////////////The second canvas//////////////
//you draw the sketch
ctx1.drawImage(lines,0,0);
//you "mask" the sketch using globalCompositeOperation and a rect filled with a gradient in the opposite direction
ctx1.globalCompositeOperation = "destination-in";
let grd1 = ctx1.createLinearGradient(0, 0, cw, 0);
grd1.addColorStop(0,"rgba(0,0,0,1)");
grd1.addColorStop(.75,"rgba(0,0,0,0)");
ctx1.fillStyle = grd1;
ctx1.beginPath()
ctx1.fillRect(0,0,cw,ch);
//you reset the canvas
ctx1.globalCompositeOperation = "source-over";
//you draw the first canvas over the masked sketch
ctx1.drawImage(canvas,0,0);
}canvas{border:1px solid}<canvas id="canvas">
<img src="data:image/jpeg;base64,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" id="box" />
</canvas>
<canvas id="canvas1">
<img id="lines" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImJveCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIyMjVweCIgaGVpZ2h0PSIyMjVweCIgdmlld0JveD0iMCAwIDIyNSAyMjUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyNSAyMjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KDQoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgIHBvaW50cz0iMTEyLjUsNzUgMTEyLjUsMTk1IDE3OCwxNTcgMTc4LDU3ICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHBvaW50cz0iNDQsNTcgNDQsMTU5IDExMiwxOTUgMTEyLjUsNzQgIi8+DQoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgcG9pbnRzPSIxMTIuNSw0NSAxMTIuNSwxMzYgMTc4LDE1OCAxNzgsNTUgIi8+DQoJPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgIHBvaW50cz0iNDYsNTYgMTEyLjUsNDMgMTEyLjUsMTM2IDQ2LDE2MCAiLz4NCgk8cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiAgcG9pbnRzPSI0Myw1NiAwLDc4IDcyLDk5IDExMi41LDczICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siICBwb2ludHM9IjExMi41LDc0IDE2MSw4OCAyMjUsNjcgMTc5LDU2ICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siICBwb2ludHM9IjExMi41LDQyIDE3NCw1NiAyMDAsNDkgMTQzLDM3ICIvPg0KCTxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siICBwb2ludHM9IjQ2LDU3IDEwOC4xNjYsNDQuODQ3IDgwLDM3IDE2LDUwLjUgIi8+DQoJPC9zdmc+DQo=" />
</canvas>