10. HTML5 Canvas [new Image(), pattern]

Hello Canvas!!

How to use new Image(), pattern

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); //이미ㅈㅣ 객체 생성 imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = pattern; context.fill(); }; imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png'; </script> <img src="http://www.html5canvastutorials.com/demos/assets/wood-pattern.png" width="0px" height="0px"> <!-- 이미지 로드 실패 방지-->

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas