We Keep Coding

Merge webcam video and canvas drawing together in JS

I'm trying to merge webcam video and canvas drawing and save to an image file. It works but video image covers canvas draving. I tried to swap places context.drawImage but still same. Any ideas? :)
canvas.addEventListener("click", async function () {
var context = canvas.getContext("2d");
context.drawImage(video, 0, 0, canvas.width / 1.5, canvas.height / 1.5);
context.drawImage(canvas, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/png");
$.ajax({
type: "POST",
url: "./upload.php",
data: {
dataURL: dataURL
}
});
});

Currently what you code does is to draw the canvas over itself, with the video already painted on it.
You can draw behind the existing content by using the globalCompositeOperation = "destination-over".
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";
const img = new Image(); // a video is the same
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
img.decode().then(() => {
canvas.onclick = (evt) => {
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// reset to default
ctx.globalCompositeOperation = "source-over";
};
ctx.fillText("click on the canvas", canvas.width / 2, canvas.height / 3);
ctx.fillText("to draw the image", canvas.width / 2, canvas.height / 3 + 20);
ctx.fillText("behind this text", canvas.width / 2, canvas.height / 3 + 40);
});
canvas { outline: 1px solid }
<canvas></canvas>

How to save a Canvas with canvas to blob without black background?

I am trying to save a chart from charts.js but its save with a black background and don´t know how to change that background to transparent or white.
I am using Canvas to blob and FileSaver
This is my script
$("#download").click(function() {
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "grafica.png");
});
});

If you don't want to mess with the chart's canvas itself, you can use an offscreen canvas and draw the background there.
const canvasWithBackground = document.createElement('canvas');
canvasWithBackground.width = canvas.width;
canvasWithBackground.height = canvas.height;
const ctx = canvasWithBackground.getContext('2d')!;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0);
canvasWithBackground.toBlob(function(blob) {
saveAs(blob, "grafica.png");
});

I'm not familiar with the library but have you tried actually giving it a white background? Something like the following? It might be using black a default when no color is encountered at a particular pixel.
$("#download").click(function() {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
saveAs(blob, "grafica.png");
});
});

i just draw a white backgroung before draw the chart on the script and solve the black background problem :)
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});

Black canvas instead of image

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);

Gradient map as opacity in a HTML5 canvas element?

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>

Canvas (property globalCompositeOperation with cover bg)

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...