Canvas element as overlay to canvas - html

TL;DR How to make canvas element with images to be overlay of second canvas with image.
I have two canvas elements. First one has image of t-shirt. Second one has images which can be added manually. I want to make second one to be overlay of first canvas.
js:
var canvas = document.getElementById('first');
var context = canvas.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/raw-00.png';
image.onload = function() {
context.save();
context.drawImage(image, 0, 0, canvas.width, canvas.height);
drawCustomLogo(context);
}
function drawCustomLogo(context) {
var layerCanvas = document.getElementById('second');
var layerContext = layerCanvas.getContext('2d');
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/forest/pattern.png';
image.onload = function() {
context.save();
context.drawImage(image, 0, 0, 265, 265);
}
context.globalCompositeOperation = 'overlay';
context.drawImage(layerCanvas, 100, 70);
}
I did some example in http://codepen.io/neilhem/pen/JdGZKx
As you can see overlayed image is lighter, how to make result not so light?

What you want is the source-atop type from the globalCompositeOperation property.
Also, in your code, you never use your second canvas so I removed it
var canvas = document.getElementById('first');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, canvas.width, canvas.height);
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/raw-00.png';
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
drawCustomLogo(context);
}
function drawCustomLogo(context) {
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/forest/pattern.png';
image.onload = function() {
context.save();
context.globalCompositeOperation = "source-atop";
context.drawImage(this, 0, 0);
}
}
body {
background-color: #000;
}
<canvas id="first" width="547" height="646"></canvas>
Ps : you may also want to change
context.fillStyle = '#FFF'; to context.fillStyle = 'rgba(0,0,0,0)';

Related

HTML5 get base64 code of image created in canvas

var ctx;
function roundedImage() {
var img = new Image();
img.onload = function() {
ctx.beginPath();
ctx.arc(160, 150, 75, 0, Math.PI * 2, true); //draw the circle
ctx.lineWidth = 5;
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.clip();
ctx.closePath();
ctx.drawImage(img, 80, 70, 160, 160);
};
img.src = "xxxxx";
img.crossOrigin = "Anonymous";
}
function fillText(name) {
ctx.fillStyle = 'white';
ctx.font = '40pt Calibri';
ctx.fillText(name, 100, 100);
}
function backImg() {
var background = new Image();
background.src = "xxxxx";
background.onload = function(){
ctx.drawImage(background, 3, 3, canvas.width - 7, canvas.height - 7);
roundedImage()
}
}
function createCanvas(width, height) {
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
}
function admire() {
createCanvas(400,625)
backImg()
var original64 = canvas.toDataURL
console.log(original64);
}
window.onload = admire();
Everything is working fine but I am unable to get the base64 code. I am getting this in console "ƒ toDataURL() { [native code] }" How can I get base64 of canvas created.
And I want to show that base64 image in another canvas. How can I do that?

Move image smoothly on an HTML5 canvas

I am moving an inserted image within a Canvas.
HTML
<div id="left">move left</div>
jQuery:
let MoveLeft=0;
$("#left").on("click", function(){
MoveLeft+=10;
});
In the canvas function
function(){
.....
var LeftPos=100; //default
If(MoveLeft!=0)
LeftPos=LeftPos + MoveLeft;
}
ctx.drawImage(img,0,0,imgW,imgH,LeftPos,0,imgW,imgH);
This works, but the movement takes place in a single jump. How do I translate the image smoothly? Like an animation?
let GlassesUp = 0;
$('.MoveGlasses').on("click", function(event) {
if ($(this).hasClass("MoveGlassesUp")) {
GlassesUp += 10;
}
drawMe();
});
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var ImgGlasses = document.getElementById('glasses');
canvas.width = 400;
canvas.height = 400;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var GUp = 50;
if (GlassesUp != 0) {
GUp = GUp - GlassesUp;
//alert(GUp)
}
ctx.drawImage(ImgGlasses, 0, 0, 250, 250, 50, GUp, 250, 250);
}
drawMe();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="MoveGlasses MoveGlassesUp">Up</div>
<canvas id="cv"></canvas>
<img src="https://image.flaticon.com/icons/svg/126/126514.svg" style="height:60px;width:100px;opacity:0" id="glasses" />
The draw function displaces the image by 0.7 per 100ms. You can adjust these two parameters.
let GlassesUp = 0;
var t;
$('.MoveGlassesUp').on("click", function(event) {
clearInterval(t)
t = setInterval(function() {
GlassesUp += 0.7;
drawMe();
}, 100);
setTimeout("clearInterval(t)", 1000)
});
$('.MoveGlassesDown').on("click", function(event) {
clearInterval(t)
t = setInterval(function() {
GlassesUp -= 0.7;
drawMe();
}, 100);
setTimeout("clearInterval(t)", 1000)
});
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var ImgGlasses = document.getElementById('glasses');
canvas.width = 400;
canvas.height = 400;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var GUp = 50;
if (GlassesUp != 0) {
GUp = GUp - GlassesUp;
//alert(GUp)
}
ctx.drawImage(ImgGlasses, 0, 0, 250, 250, 50, GUp, 250, 250);
}
drawMe();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="MoveGlasses MoveGlassesUp">up</button>
<button class="MoveGlasses MoveGlassesDown">down</button>
<hr/>
<canvas id="cv"></canvas>
<img src="https://image.flaticon.com/icons/svg/126/126514.svg" style="height:60px;width:100px;opacity:0" id="glasses" />

Work with image captured in webcam with canvas

I have a problem.
I need to capture a iamgem from my webcam, and work in canvas with this image.
my code is:
Webcam.set({
width: 640,
height: 480,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
function take_snapshot() {
Webcam.snap(function (data_uri) {
var canvas = document.getElementById("results");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.drawImage(data_uri, 0, 0);
});
}
This is what I try and I know it is wrong.
So what I need to do to fix this?
drawImage() cannot draw data-uris directly so they have be converted to an image element first:
Webcam.snap(function (data_uri) {
var canvas = document.getElementById("results");
var ctx = canvas.getContext("2d");
var img = new Image(); // create an image element for data-uri
img.onload = function() { // add async handler
ctx.drawImage(this, 0, 0); // when loaded, draw image (this)
// goto next step from here as this block is async
};
img.src = data_uri; // set data-uri as source
});

how to free draw a straight line in html 5 canvas and get the coordinates of the line?

How to draw a line in html 5 canvas?
I achived to draw an rectangle but how to draw a straight line. Here is my code.
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!path.length)
return;
ctx.beginPath();
ctx.moveTo.apply(ctx, path[0]);
for (var i = 1,
len = path.length; i < len; ++i)
ctx.lineTo.apply(ctx, path[i]);
ctx.strokeStyle = '#000';
ctx.stroke();
var start = new Date;
var bounds = contextBoundingBox(ctx);
ms.value = ms.value * 1 + Math.round(((new Date) - start - ms.value) / 4);
ctx.strokeStyle = '#c00';
ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
}
This above code is for drawing the rectangle, please modify the code to draw a straight line.
DEMO
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
//add event listner to canvas
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mouseup', mouseUp, false);
var mouseDown = false;
var points = [];
var lines = [];
var linePoint = [];
var stPoint;
var endPoint;
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
function Point(x, y) {
this.x = x;
this.y = y;
}
function lineP(stPoint, endPoint) {
this.stPoint = stPoint;
this.endPoint = endPoint;
}
function mouseDown(e) {
mouseDown = true;
stPoint = new Point(e.layerX, e.layerY); //get start point for line
}
function mouseMove(e) {
if (!mouseDown) return;
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); //redraw image
drawLines(); //draw previous lines
ctx.beginPath();
ctx.moveTo(stPoint.x, stPoint.y);
ctx.lineTo(e.layerX, e.layerY);
ctx.stroke();
ctx.closePath();
}
function mouseUp(e) {
mouseDown = false;
endPoint = new Point(e.layerX, e.layerY); //get end point
linePoint.push(new lineP(stPoint, endPoint)); //store line points for next draw
console.log(linePoint);
}
//draw all lines from stored point
function drawLines() {
linePoint.forEach(function(item) {
ctx.beginPath();
ctx.moveTo(item['stPoint'].x, item['stPoint'].y);
ctx.lineTo(item['endPoint'].x, item['endPoint'].y);
ctx.stroke();
ctx.closePath();
})
}
canvas {
border: 1px solid #999;
}
<canvas id="canvas" width="300" height="300"></canvas>
On mouse down store start value of line and on mouse up store end point of line. (event.layerX,event.layerY) will give the point cordinate.

Firefox bug - globalCompositeOperation not working with drawImage for an SVG element

I'm trying to create an 'eraser' effect in Canvas, but using an SVG image as a custom shape for the eraser.
So I can draw my SVG image to canvas, and use globalCompositeOperation='destination-out' to create a masking effect.
It works great in IE, Safari, and Chrome. But it utterly fails in Firefox.
function init() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function () {
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.globalCompositeOperation = 'destination-out';
}
img.src = "http://www.evanburke.com/FROST.png";
var svg = new Image;
svg.src = "http://www.evanburke.com/luf.svg";
function drawPoint(pointX,pointY){
ctx.drawImage(svg,pointX,pointY);
}
canvas.addEventListener('mousemove',function(e){
drawPoint(e.clientX,e.clientY);
},false);
}
<body onload="javascript:init();">
<div>
<canvas id="c" width="400" height="400"></canvas>
</div>
</body>
That's indeed a bug, and as advised by #RobertLongson, you should raise a bug in Mozilla's Buzilla.
But first, you should clean up your code : ctx.beginPath() is useless. and ctx.closePath() doesn't do what yo think it does.
If you want a workaround for this issue, you could first draw the svg image onto a canvas, then use this canvas as the eraser :
(function init() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var svgCan;
var img = document.createElement('IMG');
img.onload = function() {
ctx.drawImage(this, 0, 0);
ctx.globalCompositeOperation = 'destination-out';
}
img.src = "http://www.evanburke.com/FROST.png";
var svg = new Image();
svg.src = "http://www.evanburke.com/luf.svg";
svg.onload = function() {
// create a canvas
svgCan = canvas.cloneNode();
svgCan.width = this.width;
svgCan.height = this.height;
// draw the svg on this new canvas
svgCan.getContext('2d').drawImage(svg, 0, 0);
}
function drawPoint(pointX, pointY) {
// this is now a pixel image that will work with gCO
ctx.drawImage(svgCan, pointX, pointY);
}
canvas.addEventListener('mousemove', function(e) {
drawPoint(e.clientX, e.clientY);
}, false);
})()
<div>
<canvas id="c" width="400" height="400"></canvas>
</div>