canvas

If you call image from computer ...not functioning!

Need to transform your jpg image in base-64 ... from example with this site

and insert code in your html file

imageObj.src = 'image to insert in base-64';

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

function drawImage(imageObj) {

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var x = 69;

var y = 50;

context.drawImage(imageObj, x, y);

var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);

var data = imageData.data;

for(var i = 0; i < data.length; i += 4) {

if ( data[i] > 0 && data[i+1] > 0 && data[i+2] > 0 ){

data[i]=255;

data[i+1]=255;

data[i+2]=255;

}

// overwrite original image

context.putImageData(imageData, x, y);

}

var imageObj = new Image();

imageObj.onload = function(){

drawImage(this);

};

imageObj.src = 'image to insert in base-64';

</script>

</body>

</html>