Make a Canvas Transparent

Question

I have a canvas with an id #cnv.

<canvas id="cnv"></canvas>
<img id="img" src=""></img>

I converted the canvas to an image using the code below:

var a = document.getElementById("img");
a.src = document.getElementById("cnv").toDataURL();  

After doing so, I save the image in physical disk.Below is the result image:

It's background is white and not transparent. I want to make the image transparent except the lines that is drawn into it.How will I do that?

Answer 1

You can use context.getImageData to fetch the rgba pixel data of your image drawn to a canvas. Then knockout the white values -- leaving only the black lines.

Here's annotated code and a Demo:

// load the image into a new image object
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/bk.png";
function start(){

  // create a canvas element
  var canvas=document.createElement("canvas");
  var ctx=canvas.getContext("2d");

  // size the canvas to the image size
  canvas.width=img.width;
  canvas.height=img.height;

  // draw the image onto the canvas
  ctx.drawImage(img,0,0);

  // get the pixel data of the canvas
  var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
  var data=imgData.data;

  // make any pure white pixel transparent: data[i+3]=0
  // Note: if needed, lower threshold slightly to catch "off-whites" 
  var threshold=255;
  for(var i=0;i<data.length;i++){
    if(data[i]==threshold && data[i+1]==threshold && data[i+2]==threshold){
      data[i+0]=0;
      data[i+1]=0;
      data[i+2]=0;
      data[i+3]=0;
    }
  }

  // put the modified pixels back on the canvas
  ctx.putImageData(imgData,0,0);

  // create an image from the canvas contents
  // and add that image to the page
  var img1=new Image();
  img1.onload=function(){
    document.body.appendChild(img1);
  }
  img1.src=canvas.toDataURL();


}

<h4>Image with pure white knocked out</h4>
<br>