How to make a mask so that the picture was on the background of another picture?
I comment out the line because of that it's not working properly http://jsfiddle.net/LZY5A/5
If the example no pictures refresh the page
Code from the jsFiddle:
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
var bg = new Image();
imageObj.src = 'http://codepo8.github.io/canvas-masking/centerblur.png';
imageObj2.src = 'http://codepo8.github.io/canvas-masking/red-panda.jpg';
bg.src = 'http://s5.goodfon.ru/image/391868-3318x2212.jpg';
setInterval(loop, 17);
function loop() {
// ctx.drawImage(bg, 0, 0, 500,500); // It should be behind
ctx.drawImage(imageObj, 100, 100, 100,100);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(imageObj2, 100, 100, 100,100);
}
You can use destination-over compositing to draw your background behind your knockout effect:
Example code and a Demo: http://jsfiddle.net/m1erickson/Uyz7Y/
ctx.drawImage(imgs[0], 100, 100, 100,100);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(imgs[1], 100, 100, 100,100);
ctx.globalCompositeOperation="destination-over";
ctx.drawImage(imgs[2],0,0);
ctx.globalCompositeOperation="source-over"; // reset to default compositing
BTW, your loop is unnecessary...
Related
I have a problem with canvas. Let's say, 1/10 time I have black square instead of my image, on chrome. My code is as follow, how can I modify it in order to avoid this black display?
<canvas id="Canvas" width="954" height="267"></canvas>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
// Map sprite
var mapSprite = new Image();
mapSprite.src = 'image.png';
var main = function () {
draw();
};
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw diagramme
context.drawImage(mapSprite, 0, 0, 954, 267);
}
main();
</script>
EDIT 1: full function draw :
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw diagramme
context.drawImage(mapSprite, 0, 0, nextWidth, nextHeight);
//draw all precedent cross
cross = new Image();
cross.src = "cross.png";
for (var i = 0; i < array_x.length; i++) {
context.drawImage(cross, array_x[i], array_y[i], 10, 10);
}
}
I believe you want to wait until image is loaded.
Replace:
main();
With:
mapSprite.addEventListener('load', main);
I did this image with my canvas because I had to modify it and merge two images. However I don't want to show it on my html page but use the url saved of the second canvas in my javascript.
How can I do that ?
Here is my fiddle : http://jsfiddle.net/acbo6m6o/7/
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
var img2 = new Image();
img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png";
img.addEventListener('load', function(e) {
ctx.arc(150, 150, 150, 0, Math.PI * 2, true);
ctx.save();
ctx.clip();
ctx.drawImage(this, 0, 0, 300, 300);
ctx.restore();
ctx2.drawImage(ctx.canvas, 35, 60, 230, 230);
ctx2.drawImage(img2, 200, 60, 75, 75);
}, true);
var dataURL = canvas2.toDataURL();
var dataURL = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=dataURL; //it save local
Is there a way to create an opacity map on a canvas element
I am trying to fade a generated image as shown below.
EXAMPLE:
I don't believe there is any way to directly draw an image with a gradiant mask, but you could pre-draw the image to a separate canvas, and use globalCompositeOperation to draw a masking linear gradient, then draw that canvas using drawImage to the main canvas.
Working Example:
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// Draw some background colors.
ctx.fillStyle = "#FF6666";
ctx.fillRect(0, 0, 150, 200);
ctx.fillStyle = "#6666FF";
ctx.fillRect(150, 0, 150, 200);
// Load the image.
img = new Image();
img.onload = function() {
// Create a canvas in memory and draw the image to it.
var icvs = document.createElement('canvas');
icvs.width = img.width;
icvs.height = img.height;
var ictx = icvs.getContext('2d');
ictx.drawImage(img, 0, 0);
// For masking.
ictx.globalCompositeOperation = 'destination-out';
// Draw the masking gradient.
var gradient = ictx.createLinearGradient(0, 0, 0, icvs.height);
gradient.addColorStop(0, "transparent");
gradient.addColorStop(1, "white");
ictx.fillStyle = gradient;
ictx.fillRect(0, 0, icvs.width, icvs.height);
// Draw the separate canvas to the main canvas.
ctx.drawImage(icvs, 25, 25, 250, 150);
};
img.src = '//i.stack.imgur.com/dR8i9.jpg';
<canvas id="cvs" width="300" height="200"></canvas>
I'm designing a simple app for which I need to use multiple globalCompositeOperation, and therefore I need to use multiple hidden items, then merge them to get the final result.
one of the canvas items is used to drawImage() and then use it as an alpha mask.
I assumed that on 2nd canvas if I use to draw 1st canvas, it will copy it exactly so I can add 2nd thing on top of it. It does copy only the fillRect() and ignores the drawImage() function...
Any idea how can I forward entire content of the first canvas to 2nd? I need the masked part to move to the 2nd canvas.
Been stuck on it for hours and need your help. Tried to use toDataUrl("image/png") and then output that into 2nd canvas, but getting same results :(
simplified version under:
http://jsfiddle.net/EbVmm/17/
Thanks
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
function drawScene(mainColour) {
var ctx = c1.getContext("2d");
var alphaPath = "http://eskarian.com/images/alpha-test.png";
var alphaObj = new Image();
alphaObj.src = alphaPath;
ctx.fillStyle = mainColour;
ctx.fillRect(0, 0, 200, 300);
ctx.globalCompositeOperation = 'xor';
alphaObj.onload = function () {
ctx.drawImage(alphaObj, 0, 0);
};
};
function addScene(colour) {
var ctx2 = c2.getContext("2d");
ctx2.drawImage(c1, 0, 0);
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = colour;
ctx2.fillRect(50, 50, 100, 100);
};
You are trying to use alphaObj before it is fully loaded.
Try something like this:
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
var alphaPath = "http://eskarian.com/images/alpha-test.png";
var alphaObj = new Image();
alphaObj.onload = function () {
drawScene(mainColour);
addScene(colour)
};
alphaObj.src = alphaPath;
function drawScene(mainColour) {
var ctx = c1.getContext("2d");
ctx.drawImage(alphaObj, 0, 0);
ctx.fillStyle = mainColour;
ctx.fillRect(0, 0, 200, 300);
ctx.globalCompositeOperation = 'xor';
};
function addScene(colour) {
var ctx2 = c2.getContext("2d");
ctx2.drawImage(c1, 0, 0);
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = colour;
ctx2.fillRect(50, 50, 100, 100);
};
Im starting to learn canvas and i just hit my first frustrating situation, im trying to make a clipping mask of a .jpg src in a triangle. Everything looks fine until i restore my context and try to add any other Path... my clipping mask appears to not exist anymore.
Here is my code :
<script>
function init() {
var canvas = document.getElementById('myCanvas');
if(canvas.getContext) {
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'stephgopro2.jpg';
// triangle coordonate
context.save();
context.beginPath;
context.moveTo(100, 0);
context.lineTo(0, 100);
context.lineTo(200, 100);
context.lineTo(100, 0);
context.clip();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, 300, 170);
};
context.restore();
context.beginPath();
context.fillStyle = '#333';
context.rect(0, 0, 600, 200);
context.fill();
}
}
</script>
</head>
<body onload='init()'>
<canvas id="myCanvas" width="600" height="200"></canvas>
</body>
Can you please help me with that? many thanks.
The image is loaded asynchronously so the context has already been restored before the image is drawn to the canvas. If you update the code as follows you'll get (what I think are) the results you expect:
function init() {
var canvas = document.getElementById('myCanvas');
if(canvas.getContext) {
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'assets/1.jpg';
// triangle coordonate
context.save();
context.beginPath();
context.moveTo(100, 0);
context.lineTo(0, 100);
context.lineTo(200, 100);
context.lineTo(100, 0);
context.stroke();
context.clip();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, 300, 170);
// Restore the context and continue drawing now the image has been drawn
context.restore();
context.beginPath();
context.fillStyle = '#333';
context.rect(0, 0, 600, 200);
context.fill();
};
}
}