Render an image in HTML5 Canvas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<script type="text/javascript" src="epos-print-3.x.x.js"></script>
<script type="text/javascript">
function drawCanvas() {
// Rendering in HTML5 Canvas
//<Obtain the context>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//<Render an image>
context.clearRect(0, 0, 512, 480);
context.drawImage(document.getElementById('coffee'), 0, 0
, 512, 384);
context.fillStyle = 'rgba(255, 255, 255, 0.5)';
context.fillRect(0, 0, 512, 480);
context.fillStyle = 'rgba(0, 0, 0, 1.0)';
//<Render a water mark for the image>
context.drawImage(document.getElementById('wmark'), 0, 0);
context.drawImage(document.getElementById('wmark'), 256, 324);
//<Render text>
context.textAlign = 'center';
context.textBaseline = 'alphabetic';
context.font = 'bold normal normal 48px "Times New Roman", serif';
context.fillText('FREE Coffee', 256, 224);
}
</script>
</head>
<body>
<button onclick="drawCanvas()">Run</button>
<canvas id="myCanvas" width="512" height="480"></canvas>
<img id="coffee" src="img/coffee.jpg" alt="">
<img id="wmark" src="img/wmark.png" alt="">
</body>
</html>
Rendering in HTML5 Canvas
To Next Page
Loading...
