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
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?
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" />
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 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.
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>