<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script src="app.js"></script>
</head>
<body>
</body>
</html
var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500;
var mycanvas,context;
window.onload = function(){
creatCanvas();
drawRect();
}
function creatCanvas(){
document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
}
function drawRect(){
context.fillStyle = "#FF0000";
context.scale(2,0.5);
context.fillRect(0,0,200,200);
}
function drawImage(){
var img = new Image;
img.onload = function(){
context.drawImage(img,0,0);
}
img.src = "2.png";
}