I want to reveal the background image on mouse move on the front image. I have tried it using fabricjs but it seems the pattern image offset is updated on mouse up.
I have also tried it using the making the pixels transparent of image on mouse move but there are performance issue on slow devices. Can you suggest any better solution.
HTML
<canvas id="container"></canvas>
JS
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var backgroundUrl = "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg";
var frontUrl = "http://tofurious.wpengine.netdna-cdn.com/images/textures/texture-8.jpg";
var canvas = new fabric.Canvas('container', {
width:canvasWidth,
height:canvasHeight,
isDrawingMode: true
});
fnDrawImage(backgroundUrl);
drawPattern()
function fnDrawImage(_url){
var Image = fabric.Image.fromURL(_url, function(oImg) {
oImg.width = canvasWidth;
oImg.height = canvasHeight;
oImg.selectable = false;
canvas.add(oImg);
});
}
function drawPattern(){
var img = new Image();
img.src = frontUrl;
img.onload = function(){
img.width = canvasWidth;
img.height = canvasHeight;
fnTexturePattern(img);
//fnStartFreeDrawing(img);
}
}
function fnTexturePattern(_img){
var texturePatternBrush = new fabric.PatternBrush(canvas);
texturePatternBrush.source = _img;
canvas.freeDrawingBrush = texturePatternBrush;
canvas.freeDrawingBrush.width = 30;
}
JSFiddle - http://jsfiddle.net/3qp5y9jb/
I converted an image to canvas and made changes to it and want to convert the canvas with changes to a Data URI and use that for the source of image object or another canvas
I am using the following code to do so but do not get any results. Please suggest any other approach I can use.
Code:
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('testImage'); //image object
var canvas = document.getElementById('canvasPnl');// source canvas
var context= canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj,0,0,300,300 );
context.fillStyle="#FFFFFF";
context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
context.fillText(new Date(), 0, 20);
context.save();
};
imageObj.src=imageURI;
var img_uri= canvas.toDataURL("image/png");
var image = new Image();
image.src =img_uri;
largeImage.src=img_uri;
var canvas2 = document.getElementById('canvasPnl2');//destination canvas
var context2= canvas2.getContext("2d");
context2.drawImage(image,0,0);
}
You've almost got it.
Since you’re generating a second image object (var image), you must also do a second onload:
var imageObj = new Image();
imageObj.onload = function(){
...
var image = new Image();
image.onload=function(){
...
}
image.src=canvas.toDataURL(); // .png is the default
};
imageObj.crossOrigin="anonymous";
imageObj.src=imageURI;
Also, you have a context.save in there without a context.restore (usually they are paired).
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ne4Up/
<!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; padding:20px; }
canvas{border:1px solid red;}
img{border:1px solid blue;}
</style>
<script>
$(function(){
var lat="lat";
var lon="long";
onPhotoURISuccess("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png");
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('testImage'); //image object
var canvas = document.getElementById('canvasPnl');// source canvas
var context= canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj,0,0,100,100 );
context.fillStyle="#FFFFFF";
context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
context.fillText(new Date(), 0, 20);
// context.save(); // where's the matching context.restore();
var image = new Image();
image.onload=function(){
var canvas2 = document.getElementById('canvasPnl2');//destination canvas
var context2= canvas2.getContext("2d");
context2.drawImage(image,0,0);
largeImage.src=canvas2.toDataURL();
}
image.src=canvas.toDataURL(); // .png is the default
};
imageObj.crossOrigin="anonymous";
imageObj.src=imageURI;
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Pnl</p>
<canvas id="canvasPnl" width=100 height=100></canvas>
<p>Pnl2</p>
<canvas id="canvasPnl2" width=100 height=100></canvas>
<p>testImage</p>
<img id=testImage src="houseicon.png" width=100 height=100 >
</body>
</html>
If you simply want to draw a canvas onto another canvas there is no need to convert it to image first. Just use the source canvas directly as an argument to drawImage:
context2.drawImage(canvas, 0, 0);
If you absolutely want to convert it to image first you only need to modify a few lines to handle the asynchronous nature of image loading:
var img_uri= canvas.toDataURL("image/png");
var image = new Image();
var canvas2; /// put them here so they are available outside onload below
var context2;
/// put it in a onload here as well
image.onload = function() {
canvas2 = document.getElementById('canvasPnl2');//destination canvas
context2= canvas2.getContext("2d");
context2.drawImage(image,0,0);
}
image.src =img_uri;
A small note: some versions of Chrome has a bug with new Image. For this reason consider using document.createElement('image') instead.
How do I drag and drop multiple images from one canvas to another? My manager has given me this task, it's been 3 days and I am not able to do this as I'm new to HTML5. I've searched Google but only got it working for one image. Please help me in this matter.
This is what I got for one image:
<pre>
<script>
window.onload = function ()
{
var canvas1 = document.getElementById("cvs1");
var canvas2 = document.getElementById("cvs2");
var context1 = canvas1.getContext('2d');
var context2 = canvas2.getContext('2d');
var imageXY = {x: 5, y: 5};
/**
* This draws the image to the canvas
*/
function Draw ()
{
//Clear both canvas first
context1.clearRect(0,0,canvas1.width,canvas1.height);
context2.clearRect(0,0,canvas2.width,canvas2.height);
//Draw a red rectangle around the image
if (state && state.dragging) {
state.canvas.getContext('2d').strokeStyle = 'red';
state.canvas.getContext('2d').strokeRect(imageXY.x - 2.5,
imageXY.y - 2.5,
state.image.width + 5,
state.image.height + 5);
}
// Now draw the image
state.canvas.getContext('2d').drawImage(state.image, imageXY.x, imageXY.y);
}
canvas2.onclick =
canvas1.onclick = function (e)
{
if (state && state.dragging) {
state.dragging = false;
Draw();
return;
}
var mouseXY = RGraph.getMouseXY(e);
state.canvas = e.target;
if ( mouseXY[0] > imageXY.x
&& mouseXY[0] < (imageXY.x + state.image.width)
&& mouseXY[1] > imageXY.y
&& mouseXY[1] < (imageXY.y + state.image.height)) {
state.dragging = true;
state.originalMouseX = mouseXY[0];
state.originalMouseY = mouseXY[1];
state.offsetX = mouseXY[0] - imageXY.x;
state.offsetY = mouseXY[1] - imageXY.y;
}
}
canvas1.onmousemove =
canvas2.onmousemove = function (e)
{
if (state.dragging) {
state.canvas = e.target;
var mouseXY = RGraph.getMouseXY(e);
// Work how far the mouse has moved since the mousedon event was triggered
var diffX = mouseXY[0] - state.originalMouseX;
var diffY = mouseXY[1] - state.originalMouseY;
imageXY.x = state.originalMouseX + diffX - state.offsetX;
imageXY.y = state.originalMouseY + diffY - state.offsetY;
Draw();
e.stopPropagation();
}
}
/**
* Load the image on canvas1 initially and set the state up with some defaults
*/
state = {}
state.dragging = false;
state.canvas = document.getElementById("cvs1");
state.image = new Image();
state.image.src = 'images/logo.png';
state.offsetX = 0;
state.offsetY = 0;
state.image.onload = function ()
{
Draw();
}
}
</script>
<canvas id="cvs1" width="400" height="125" style="float: left">[No canvas support]</canvas>
<canvas id="cvs2" width="400" height="125" style="float: left; margin-left: 100px">[No canvas support]</canvas>
</pre>
Drag/Drop multiple items between 2 canvases
Here’s what the code does:
Click to select one or more images from the top source canvas
Click an image again to toggle its selection on/off
Once you have made all your selections, drag from the top canvas to the bottom canvas
Your selections will be moved to the bottom canvas
Some explanation about the code:
Each image is stored in an array called Images
An item-object for each image is stored in an array called items
The item-object contains an item’s description, image-url, an isSelected flag and an isDropped flag.
The mouseup event handler of the top source canvas checks for hits on images and toggles their isSelected flags.
The mouseup event handler responds to drops onto the bottom drop canvas. It checks for selected items and records them as dropped by setting their isDropped flags.
The drawContainer function distributes items between the source and drop canvas based on their isDropped flags (isDropped==false are drawn in the top source canvas – isDropped==true are drawn in the bottom drop canvas)
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/3KqgX/
<!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; padding:10px; }
canvas{border:1px solid red;}
#canvas {
}
#canvas:active {
cursor: move;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var drop=document.getElementById("dropzone");
var dropCtx=drop.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var mouseIsDown=false;
var frameWidth=128;
var frameHeight=128;
// checkmark for selected
var checkmark=document.createElement("img");
checkmark.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/smallCheckmark.png";
var images=[];
var items=[];
items.push({description:"House#1",url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg",isSelected:false,isDropped:false,x:0,y:0});
items.push({description:"House#2",url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg",isSelected:false,isDropped:false,x:0,y:0});
items.push({description:"House#3",url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg",isSelected:false,isDropped:false,x:0,y:0});
var imgLoadCount=0;
for(var i=0;i<items.length;i++){
images[i]=document.createElement("img");
images[i].onload=function(){
if(++imgLoadCount>=items.length){ draw(); }
}
images[i].src=items[i].url;
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
dropCtx.clearRect(0,0,drop.width,drop.height);
var canvasX=0;
var dropX=0;
//
for(var i=0;i<items.length;i++){
if(items[i].isDropped){
x=dropX*160+10;
drawContainer(dropCtx,i,x,20);
dropX++;
items[i].x=x;
}else{
x=canvasX*160+10;
drawContainer(ctx,i,x,20);
canvasX++;
items[i].x=x;
}
}
}
// draw image container
function drawContainer(context,index,x,y){
context.beginPath();
context.rect(x,y+frameHeight,frameWidth,30);
context.fillStyle="black";
context.fill();
context.beginPath();
context.fillStyle="white";
context.font="10pt Verdana";
context.fillText(items[index].description,x+10,y+frameHeight+18);
// draw a thumbnail of the image
var img=images[index];
if(img.width>=img.height){
context.drawImage(img,0,0,img.width,img.height,
x,y,128,128*img.height/img.width);
}else{
context.drawImage(img,0,0,img.width,img.height,
x,y,128*img.width/img.height,128); // edited s/b [,128], not [/128]
}
// outer frame (green if selected)
context.beginPath();
context.rect(x-2,y-2,frameWidth+4,frameHeight+30+4);
context.lineWidth=3;
context.strokeStyle="lightgray";
if(items[index].isSelected){
context.strokeStyle="green";
context.drawImage(checkmark,x+frameWidth-30,y+frameHeight+3);
}
context.stroke();
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
mouseIsDown=true;
}
function handleMouseUp(e){
mouseIsDown=false;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
for(var i=0;i<items.length;i++){
var item=items[i];
// have we clicked on something?
if(!item.isDropped && mouseX>=item.x && mouseX<=item.x+frameWidth){
// if so, toggle its selection
items[i].isSelected=!(items[i].isSelected);
draw();
}
}
}
function handleMouseOut(e){
if(!mouseIsDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
}
function handleDrop(e){
for(var i=0;i<items.length;i++){
if(items[i].isSelected){
items[i].isDropped=true;
items[i].isSelected=false;
console.log(i);
}
}
draw();
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$("#dropzone").mouseup(function(e){handleDrop(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Click an item to toggle it's selection</p>
<p>Drag from top to bottom canvas to drop selected items</p>
<canvas id="canvas" width=500 height=200></canvas><br>
<canvas id="dropzone" width=500 height=200></canvas>
</body>
</html>
[Addition: Alternate code to sort bottom canvas by order dropped]
function handleDrop(e){
for(var i=items.length-1;i>=0;i--){
if(items[i].isSelected){
items[i].isDropped=true;
items[i].isSelected=false;
// sort the bottom canvas by order dropped
var move=items[i];
items.splice(i,1);
items.push(move);
}
}
draw();
}
[ Edited to present a solution in KineticJS ]
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/bSpBF/
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
body{ background-color: ivory; padding:10px;}
#container1,#container2{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:100px;
}
#container2{
height:300px;
}
</style>
<script>
$(function(){
var highlightWidth=8;
var stage = new Kinetic.Stage({
container: 'container1',
width: 300,
height: 100
});
var layer = new Kinetic.Layer();
stage.add(layer);
var dropzone = new Kinetic.Stage({
container: 'container2',
width: 300,
height: 300
});
var dropLayer = new Kinetic.Layer();
dropzone.add(dropLayer);
// these must go after the creation of stages & layers
addBackground(stage,layer,dropLayer);
layer.draw();
addBackground(dropzone,dropLayer,layer);
dropLayer.draw();
// get images & then trigger start()
var images={};
var URLs = {
house1: 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg',
house2: 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg',
house3: 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg'
};
loadImages(URLs,start);
function start(){
var house1=kImage(images.house1,10,10,50,50,layer);
var house2=kImage(images.house2,75,10,50,50,layer);
var house3=kImage(images.house3,140,10,50,50,layer);
layer.draw();
}
function swapStagesIfSelected(sourceLayer,destinationLayer,startX,startY){
// get all elements on the source layer
var elements=sourceLayer.get("Image");
// don't let dropped elements fall off the stage
var totalWidth=0;
var maxHeight=-999;
var layerWidth=destinationLayer.getStage().getWidth();
var layerHeight=destinationLayer.getStage().getHeight();
for(var i=0;i<elements.length;i++){
if(elements[i].isSelected){
totalWidth+=elements[i].getWidth();
maxHeight=Math.max(elements[i].getHeight(),maxHeight);
}
}
if(startX+totalWidth>layerWidth){
startX=layerWidth-totalWidth-15;
}
if(startY+maxHeight>layerHeight){
startY=layerHeight-maxHeight-15;
}
// move all selected images
// to the clicked x/y of the destination layer
for(var i=0;i<elements.length;i++){
var element=elements[i];
if(element.isSelected){
var img=element.getImage();
kImage(img,startX,startY,element.getWidth(),element.getHeight(),destinationLayer);
startX+=element.getWidth()+10;
element.remove();
}
}
sourceLayer.draw();
destinationLayer.draw();
}
// build the specified KineticJS Image and add it to the specified layer
function kImage(image,x,y,width,height,theLayer){
var image=new Kinetic.Image({
image:image,
x:x,
y:y,
width:width,
height:height,
strokeWidth:0.1,
stroke:"green",
draggable:true
});
image.myLayer=theLayer;
image.isSelected=false;
image.on("click",function(){
highlight(this);
this.myLayer.draw();
});
image.myLayer.add(image);
return(image);
}
// build a background image and add it to the specified stage
function addBackground(theStage,theLayer,otherLayer){
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: theStage.getWidth(),
height: theStage.getHeight(),
fill: "white",
stroke: "green",
strokeWidth: 1
});
background.on("click",function(){
var pos=theStage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
swapStagesIfSelected(otherLayer,theLayer,mouseX,mouseY);
});
theLayer.add(background);
}
///////////// Image loader
function loadImages(URLs, callback) {
var loaded = 0;
var needed = 0;
for(var url in URLs) { needed++; console.log(url); }
for(var url in URLs) {
images[url] = new Image();
images[url].onload = function() {
if(++loaded >= needed) {
callback(images);
}
};
images[url].src = URLs[url];
}
}
///////////// Toggle Highlighting
function highlight(element,setStrokeWidth){
if(setStrokeWidth){
element.setStrokeWidth(setStrokeWidth);
}else{
if(element.getStrokeWidth()>5){
element.setStrokeWidth(0.1);
element.isSelected=false;
}else{
element.setStrokeWidth(highlightWidth);
element.isSelected=true;
}
}
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Click on image(s) to toggle selection</p>
<p>Then click in the other canvas to drop</p>
<div id="container1"></div>
<div id="container2"></div>
<button id="clear">Clear Hightlights</button>
<button id="swap">Swap Selected</button>
</body>
</html>
Was wondering if any of you could help me
I've got to create an advert and want to have text flying in from the right.
So far I've managed to do it, but cannot clear the canvas for reanimation.
Here's my code so far:
<canvas id="canvas" width="800" height="200">Your browser doesn't support the canvas. <br/> I appologise for any inconvenience.
</canvas>
<script type = "text/javascript">
//Set up the canvas
var the_canvas_element = document.getElementById("canvas");
var the_canvas = the_canvas_element.getContext("2d");
//Start Variables
var x = 800;
//Start animation timing
var int = setInterval(draw,10);
var ljmulogo = new Image ();
{
ljmulogo.src = 'C:\Users\Chad\Documents\My Web Sites\CWK 2\Part A\Images\ljmu_logo.png'
setInterval (draw,100)
}
function draw()
{
//Clear canvas
the_canvas.clearRect(0,0,800,200);
//Draw text
the_canvas.fillStyle = "#000000";
the_canvas.font = "24pt arial";
the_canvas.fillText("Welcome to:",x,30);
the_canvas.fillStyle = "#000000";
the_canvas.font = "bold 24pt arial";
the_canvas.fillText("Liverpool John Moores University",x,70);
the_canvas.fillStyle = "#000000";
the_canvas.font = "32pt arial";
the_canvas.fillText("Computer Forensics",x,150);
//Check if at the end
if (x<=20)
{
//End animation
int = clearInterval(int);
}
else
{
//bring text in further
x = x -2;
}
}
</script>
Thanks a lot for any help, much appreciated :)
I'm not sure what's going on here, it doesn't look valid:
var ljmulogo = new Image ();
{
ljmulogo.src = 'C:\Users\Chad\Documents\My Web Sites\CWK 2\Part A\Images\ljmu_logo.png'
setInterval (draw,100)
}
To create a new image, try this:
//This code outside the draw loop
var ljmulogo = new Image();
ljmulogo.src = 'ljmu_logo.png';
//This code inside the draw loop
ctx.drawImage(ljmulogo, 0, 0);
(and remove the setInterval (draw,100) as you already have a setInterval + that 100 value is pretty high).
I have two html img objects with different src urls. I'd like to combine these two images (using canvas), and create one merged img object.
Is this possible? How?
You could use drawImage. Demo. Code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if(imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
// http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
Adapt as needed. :)
You can draw both images on the canvas and combine them with any overlay mode you like. To get the bitmap data from the canvas you can use 'toDataURL'. Only note that both images should come from the same domain as the page, otherwise your access to the pixel data is blocked for security reasons.
You can find the solution here.
Maybe it will help you.
HTML code:
<div id="container">
<input type="file" id="imageLoader" name="imageLoader" />
<input type="file" id="iimageLoader" name="imageLoader" />
<canvas id="imageCanvas" width="300" height="300"></canvas>
<a id="lnkDownload" href="#">Save image</a>
</div>
JS code:
var canvas = new fabric.Canvas('imageCanvas', {
backgroundColor: 'rgb(240,240,240)'
});
canvas.setWidth(300);
canvas.setHeight(300);
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var objects = canvas.getObjects();
for (var i in objects) {
objects[i].remove();
}
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var imgInstance = new fabric.Image(img, {
selectable: 1
})
canvas.add(imgInstance);
/* var red = new fabric.Rect({ width: 80, height: 50, fill: 'red'})
canvas.add(red);
red.center(); */
canvas.deactivateAll().renderAll();
}
var iimageLoader = document.getElementById('iimageLoader');
iimageLoader.addEventListener('change', handleImage, false);
function handleImage(f) {
var objects = canvas.getObjects();
/* for (var i in objects) {
objects[i].remove();
} */
var reader = new FileReader();
reader.onload = function(event) {
var fimg = new Image();
fimg.onload = function() {
var fimgInstance = new fabric.Image(fimg, {
selectable: 1,
width: 80,
height: 50
})
canvas.add(fimgInstance);
fimgInstance.center();
/* var red = new fabric.Rect({ width: 80, height: 50, fill: 'red'})
canvas.add(red);
red.center(); */
canvas.deactivateAll().renderAll();
}
fimg.src = event.target.result;
}
reader.readAsDataURL(f.target.files[0]);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
function saveImage(e,f) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'canvas.png'
}
I'm using fabric.js as it's more convenient
You should use the canvas API getImageData()
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas