Rendering In Html5 Canvas - Epson TM-T88V-i User Manual
Epos-print api
Hide thumbs
Also See for TM-T88V-i:
- Technical reference manual (166 pages) ,
- Technical reference and user's manual (164 pages) ,
- User manual (100 pages)
Table of Contents
Advertisement
Rendering in HTML5 Canvas
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
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>
54
, 512, 384);
Rendering in HTML5 Canvas
- Quick Links:
- Print Example
- Tm-T88V-I
Hide quick links:
Advertisement
Table of Contents
