キャンバスはソースキャンバスからコピーした後にレンダリングされません

Question

キャンバスと選択ボタンが2つあります。

選択ボタンは、2番目のキャンバスの縮尺を変更するためのボタンです。

第1キャンバスの内容は第2キャンバスにコピーされます。

選択ボタンで縮尺を大きくすると、2番目のキャンバスのサイズと縮尺が完全に変わりますが、レンダリングが悪い（矩形とテキストがぼやけている）。

何が問題ですか？ここで

ソースコード（あなたはhttps://jsfiddle.net/0kqqnkmp/それを試すことができます）：

<canvas id="canvas"></canvas> 
<canvas id="canvas_second"></canvas> 

<br>Choose your scale : <select onchange="change_scale(this);" autocomplete="off"> 
          <option>0.5</option> 
          <option selected>1</option> 
          <option>1.5</option> 
          <option>2</option> 
         </select> 


<script type="text/javascript"> 

//The canvas : 
c = document.getElementById("canvas"); 
c.style.border = "solid #000000 1px"; 

//The second canvas : 
c_second = document.getElementById("canvas_second"); 
c_second.style.border = "solid #000000 1px"; 

//Define the original width and height canvas : 
ORIGINAL_WIDTH_CANVAS = 300; 
ORIGINAL_HEIGHT_CANVAS = 300; 

c.width = ORIGINAL_WIDTH_CANVAS; 
c.height = ORIGINAL_HEIGHT_CANVAS; 

c_second.width = ORIGINAL_WIDTH_CANVAS; 
c_second.height = ORIGINAL_HEIGHT_CANVAS; 

//The canvas context : 
ctx = c.getContext("2d"); 
ctx_second = c_second.getContext("2d"); 

//Default scaling 
scale = 1; 

//Drawing function : 
function draw() 
{ 
    //Clear the drawing : 
    ctx.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS); 

    //Drawing a red rectangle : 
    ctx.fillStyle = "#000000"; 
    ctx.fillRect(5, 5, 50, 50); 

    //Drawing a text : 
    ctx.font = "normal bold 20px sans-serif"; 
    ctx.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10); 


    //Clear the drawing on the second canvas : 
    ctx_second.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS); 

    //Copy drawing on the second canvas : 
    ctx_second.drawImage(c, 0, 0); 

} 

//Function for scaling the second canvas : 
function change_scale(this_select) 
{ 
    //Retrieve the scale value : 
    scale = parseFloat(this_select.value); 

    //Resize the second canvas : 
    c_second.width = ORIGINAL_WIDTH_CANVAS * scale; 
    c_second.height = ORIGINAL_HEIGHT_CANVAS * scale; 

    //Apply scaling on the second canvas : 
    ctx_second.scale(scale, scale); 
} 


//Draw : 
setInterval("draw()", 300); 

</script> 

Answer 1

あなたのぼやけた結果は、あなたがイメージをスケールアップ時に予想されます。

キャンバスは事実上ビットマップイメージです。ビットマップイメージは、拡大するとぼやけてしまいます。

したがって、&をビットマップキャンバス＃1をキャンバス＃2に描画すると、ぼやけた結果になります。

修正はscale(2,2)キャンバス＃2にして、最初のキャンバスに矩形&のテキストを描いたのと同じコマンドを再発行します。

再描画時にscaleが自動的に[x、y]座標の変更を処理します。キャンバス＃1に描いたのと全く同じ[x、y]座標を使用します。クローニングキャンバス＃1コンテンツのため）私は単にdrawImagを（使用して好む理由です、

// scale the second canvas 
secondContext.scale(2,2); 

//Drawing a red rectangle : 
secondContext.fillStyle = "#000000"; 
secondContext.fillRect(5, 5, 50, 50); 

//Drawing a text : 
secondContext.font = "normal bold 20px sans-serif"; 
secondContext.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10);