Drawing Images
We can draw images on the canvas by using the drawImage method.
This method takes three, five, or nine arguments. The first argument is the source of the image, which can be the DOM object that represents an img, video, or another canvas element.
drawImage(imageElement, xOnCanvax, yOnCanvas)
drawImage(imageElement, xOnCanvax, yOnCanvas, imageWidth, imageHeight).
drawImage(imageElement, imageOffsetX, imageOffsetY, imageClipWidth, imageClipHeight, xOnCanvas, yOnCanvas, widthOnCanvas, heightOnCanvas):
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
border: thin solid black;
margin: 4px
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140" preload="auto">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<img id="myID" hidden src="http://java2s.com/Book/HTML-CSSImages/star.png" />
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var imageElement = document.getElementById("myID");
ctx.drawImage(imageElement, 10, 10);
ctx.drawImage(imageElement, 120, 10, 100, 120);
ctx.drawImage(imageElement, 20, 20, 100, 50, 250, 10, 100, 120);
</script>
</body>
</html>
Home
HTML CSS Book
HTML
HTML CSS Book
HTML
canvas:
- Getting Started with the Canvas Element
- Getting a Canvas Context
- Drawing Rectangles
- Canvas Drawing State
- Setting the Line Join Style
- Using Gradients
- Using Patterns
- Using smaller shapes with an image pattern
- Drawing Images
- Using Video Images
- Using Canvas Images
- Setting the Fill & Stroke Styles
- Saving and Restoring Drawing State
- Drawing Using Paths
- Drawing Arcs
- Drawing Bezier Curves
- Drawing Text
- Using Shadows
- Using Transparency
Related: