Как отредактировать моментальный снимок с видео?

Question

Я загружаю видео с моего компьютера через getUserMedia, я делаю снимок с холстом. Но когда я пытаюсь редактировать код ниже, я не могу.

var canvas = document.querySelector("canvas") 
var ctx = canvas.getContext('2d'); 
var sketch = document.getElementById("sketch") 
var sketch_style = getComputedStyle(sketch) 
canvas.width = parseInt(sketch_style.getPropertyValue('width')) 
canvas.height = parseInt(sketch_style.getPropertyValue('height')) 
var mouse = {x: 0, y: 0} 
var last_mouse = {x: 0, y: 0} 

/* Mouse Capturing Work */ 
canvas.addEventListener('mousemove', function(e) { 
    last_mouse.x = mouse.x; 
    last_mouse.y = mouse.y; 

    mouse.x = e.pageX - this.offsetLeft; 
    mouse.y = e.pageY - this.offsetTop; 
}, false); 

/* Drawing on Paint App */ 
ctx.lineWidth = 5; 
ctx.lineJoin = 'round'; 
ctx.lineCap = 'round'; 
/* Posso fazer um switch case aqui pra escolher uma cor */ 
ctx.strokeStyle = 'blue'; 

canvas.addEventListener('mousedown', function(e) { 
     canvas.addEventListener('mousemove', onPaint, false); 
}, false); 

canvas.addEventListener('mouseup', function() { 
     canvas.removeEventListener('mousemove', onPaint, false); 
}, false); 

var onPaint = function() { 
    ctx.beginPath(); 
    ctx.moveTo(last_mouse.x, last_mouse.y); 
    ctx.lineTo(mouse.x, mouse.y); 
    ctx.closePath(); 
    ctx.stroke(); 
}; 
function snapshot() { 
    canvas.width = 500; 
    canvas.height = 300; 
    ctx.drawImage(videoNode, 0, 0, canvas.width, canvas.height); 

} 
foto.addEventListener('click', snapshot, false); 

Я могу поставить линии, но они не меняют цвет, толщина и т.д. ... Я использую Electron для выполнения настольных веб-приложений. Кто-нибудь может мне помочь?? : D

Snapshot on Electron

Answer 1

Это потому, что, когда вы установили новый размер -Даже если это тот же размер, полотно будет сбросить состояние. может быть исправлено путем установки линейного материала после установки нового размера

function snapshot() { 
    canvas.width = 500; 
    canvas.height = 300; 
    ctx.drawImage(videoNode, 0, 0, canvas.width, canvas.height); 

    // set line stuff here <===================== 
    ctx.lineWidth = 5; 
    ctx.lineJoin = 'round'; 
    ctx.lineCap = 'round'; 
    /* Posso fazer um switch case aqui pra escolher uma cor */ 
    ctx.strokeStyle = 'blue'; 
}