ビデオからスナップショットを編集する方法は？

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

私はラインを置くことができますが、彼らは、色、太さなどを変更しないでください...私は、デスクトップ、Webアプリケーションを実行するためにElectronを使用しています。誰かが私を助けることができる？ ：D

Snapshot on Electron

Answer 1

あなたは新しいサイズに-evenを設定するとき、それは同じ大きさであれば、キャンバスの状態がリセットされますので、それはです。新しいサイズが設定されたあとに行を設定することで修正できます

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'; 
}