context.fillStyle = "black"; context.setTransform(1,0,0,1,0,0); context.translate(125, 125); context.scale(2, 1); context.rotate(Math.PI / 180*45); context.strokeRect(-25, -25, 50, 50); var canvas, context; function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); context.lineWidth = 2; context.strokeStyle = "blue"; canvas.addEventListener("mousemove", function (e) { move(e) }, false); canvas.addEventListener("mousedown", function (e) { down(e) }, false); canvas.addEventListener("mouseup", function (e) { up(e) }, false); canvas.addEventListener("mouseout", function (e) { out(e) }, false); } var startX = 0, startY = 0; var drawing = false; function draw(curX, curY) { context.beginPath(); context.moveTo(startX, startY); context.lineTo(curX, curY); context.stroke(); } function down(e){ startX = e.offsetX; startY = e.offsetY; drawing = true; } function up(e) { drawing = false; } function move(e) { if(!drawing) return; var curX = e.offsetX, curY = e.offsetY; draw(curX, curY); startX = curX; startY = curY; } function out(e) { drawing = false; }

마우스를 누른 채 드래깅하여 그림 그려 보세요