Epson TM-T70-i ePOS-Print API Users Manual For TM-i firmware 4.1 - Page 52

Rendering in HTML5 Canvas

Get Epson TM-T70-i PDF manuals and user guides View all Epson TM-T70-i manuals
Add to My Manuals
Save this manual to your list of manuals

Page 52 highlights

Rendering in HTML5 Canvas Render an image in HTML5 Canvas. Rendering in HTML5 Canvas TITLE function drawCanvas() { // Rendering in HTML5 Canvas // var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // 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)'; // context.drawImage(document.getElementById('wmark'), 0, 0); context.drawImage(document.getElementById('wmark'), 256, 324); // context.textAlign = 'center'; context.textBaseline = 'alphabetic'; context.font = 'bold normal normal 48px "Times New Roman", serif'; context.fillText('FREE Coffee', 256, 224); } Run 52

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
52
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-4.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