Canvas描画領域のサイズ変更

Canvasの描画領域のサイズの変更は次のようにしてやります。
このサンプルでは幅100、高さ100の描画領域を、幅500、高さ500に変更（設定）しています。
このサンプルでは変更後、直線を引きます。 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Canvas描画領域のサイズ変更</title>
  <script>
   var myCanvas;
   var context;

   function on_load()
   {
    myCanvas = document.getElementById("mycanvas");
    myCanvas.width = 500;  // サイズ変更
    myCanvas.height = 500; // サイズ変更
    context = myCanvas.getContext("2d");
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(4000,4000);
    context.stroke();
   }

  </script>
 </head>
 <body onload="on_load()">
  <canvas id="mycanvas" width="100" height="100"></canvas>
 </body>
</html>

トップページへ