javascript html5 画线 写文字

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
</script>

<canvas id="controlCanvas" width="1680" height="1050">
</canvas>

<button id="changeSize">
    变化大小
</button>

<script type="text/javascript" src="jquery-1.6.4.min.js" />
</script>

<script type="text/javascript">
    $(function() {
      var sceneWidth = 950;
      var sceneHeight = 600;
      var originX = 100;
      var originY = 100;
      var tileWidth = 64;
      var tileHeight = 32;
      
    drawXY(sceneWidth, sceneHeight, originX, originY);
    drawTile(sceneWidth, sceneHeight, originX, originY, tileWidth, tileHeight);
    })

  function drawXY(sceneWidth, sceneHeight, originX, originY)
  {
    var canvas = document.getElementById("controlCanvas");
        var context = canvas.getContext("2d");
       
    context.beginPath();
       
        // 画个矩形表示一张地图
        context.moveTo(originX, originY);
        context.lineTo(originX + sceneWidth, originY);
        context.lineTo(originX + sceneWidth, originY + sceneHeight);
        context.lineTo(originX, originY + sceneHeight);
    
        // 写字
        context.fillText("(0, 0)", originX - 45, originY - 15);
    context.fillText(sceneWidth, originX + sceneWidth, originY - 5);
    context.fillText(sceneHeight, originX - 20, originY + sceneHeight);
       
        context.stroke();
  }
  
  function drawTile(sceneWidth, sceneHeight, originX, originY, tileWidth, tileHeight)
  {
    var canvas = document.getElementById("controlCanvas");
        var context = canvas.getContext("2d");

    context.beginPath();
    
        var row = (sceneHeight + tileHeight - 1) / tileHeight;
        var col = (sceneWidth + tileWidth - 1) / tileWidth;

        for (var i = 0; i < row; ++i) {
            context.moveTo(originX, originY + i * tileHeight);
            context.lineTo(originX + sceneWidth, originY + i * tileHeight);
            context.fillText(i, originX - 25, originY + i * tileHeight + 3);

        }

        for (var i = 0; i < col; ++i) {
            context.moveTo(originX + i * tileWidth, originY);
            context.lineTo(originX + i * tileWidth, originY + sceneHeight);
            context.fillText(i, originX + i * tileWidth - 3, originY - 20);
        }
       
        context.stroke();
  }
</script>