litecanvas 0.71.0 → 0.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dist.js +13 -38
- package/dist/dist.min.js +1 -1
- package/package.json +3 -3
- package/src/index.js +15 -46
- package/types/index.d.ts +8 -15
- package/types/types.d.ts +8 -15
package/dist/dist.js
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
animate: true
|
|
65
65
|
};
|
|
66
66
|
settings = Object.assign(defaults, settings);
|
|
67
|
-
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif",
|
|
67
|
+
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
|
|
68
68
|
init: null,
|
|
69
69
|
update: null,
|
|
70
70
|
draw: null,
|
|
@@ -254,10 +254,10 @@
|
|
|
254
254
|
rect(x, y, width, height, color = 0, radii = null) {
|
|
255
255
|
_ctx.beginPath();
|
|
256
256
|
_ctx[radii ? "roundRect" : "rect"](
|
|
257
|
-
~~x
|
|
258
|
-
~~y
|
|
259
|
-
~~width,
|
|
260
|
-
~~height,
|
|
257
|
+
~~x - _outline_fix,
|
|
258
|
+
~~y - _outline_fix,
|
|
259
|
+
~~width + _outline_fix * 2,
|
|
260
|
+
~~height + _outline_fix * 2,
|
|
261
261
|
radii
|
|
262
262
|
);
|
|
263
263
|
instance.stroke(color);
|
|
@@ -293,13 +293,7 @@
|
|
|
293
293
|
*/
|
|
294
294
|
circ(x, y, radius, color) {
|
|
295
295
|
_ctx.beginPath();
|
|
296
|
-
_ctx.arc(
|
|
297
|
-
~~x + _outline_fix,
|
|
298
|
-
~~y + _outline_fix,
|
|
299
|
-
~~radius,
|
|
300
|
-
0,
|
|
301
|
-
TWO_PI
|
|
302
|
-
);
|
|
296
|
+
_ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
|
|
303
297
|
instance.stroke(color);
|
|
304
298
|
},
|
|
305
299
|
/**
|
|
@@ -326,8 +320,10 @@
|
|
|
326
320
|
*/
|
|
327
321
|
line(x1, y1, x2, y2, color) {
|
|
328
322
|
_ctx.beginPath();
|
|
329
|
-
|
|
330
|
-
|
|
323
|
+
let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0;
|
|
324
|
+
let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0;
|
|
325
|
+
_ctx.moveTo(~~x1 + xfix, ~~y1 + yfix);
|
|
326
|
+
_ctx.lineTo(~~x2 + xfix, ~~y2 + yfix);
|
|
331
327
|
instance.stroke(color);
|
|
332
328
|
},
|
|
333
329
|
/**
|
|
@@ -360,9 +356,10 @@
|
|
|
360
356
|
* @param {number} y
|
|
361
357
|
* @param {string} text the text message
|
|
362
358
|
* @param {number} [color=3] the color index
|
|
359
|
+
* @param {string} [fontStyle] can be "normal" (default), "italic" and/or "bold".
|
|
363
360
|
*/
|
|
364
|
-
text(x, y, text, color = 3) {
|
|
365
|
-
_ctx.font = `${
|
|
361
|
+
text(x, y, text, color = 3, fontStyle = "normal") {
|
|
362
|
+
_ctx.font = `${fontStyle} ${_fontSize}px ${_fontFamily}`;
|
|
366
363
|
_ctx.fillStyle = instance.getcolor(color);
|
|
367
364
|
_ctx.fillText(text, ~~x, ~~y);
|
|
368
365
|
},
|
|
@@ -382,14 +379,6 @@
|
|
|
382
379
|
textsize(size) {
|
|
383
380
|
_fontSize = size;
|
|
384
381
|
},
|
|
385
|
-
/**
|
|
386
|
-
* Sets whether a font should be styled with a "normal", "italic", or "bold".
|
|
387
|
-
*
|
|
388
|
-
* @param {string} style
|
|
389
|
-
*/
|
|
390
|
-
textstyle(style) {
|
|
391
|
-
_fontStyle = style || "";
|
|
392
|
-
},
|
|
393
382
|
/**
|
|
394
383
|
* Sets the alignment used when drawing texts
|
|
395
384
|
*
|
|
@@ -402,20 +391,6 @@
|
|
|
402
391
|
if (align) _ctx.textAlign = align;
|
|
403
392
|
if (baseline) _ctx.textBaseline = baseline;
|
|
404
393
|
},
|
|
405
|
-
/**
|
|
406
|
-
* Returns a TextMetrics object that contains information about the measured text (such as its width, for example)
|
|
407
|
-
*
|
|
408
|
-
* @param {string} text
|
|
409
|
-
* @param {number} [size]
|
|
410
|
-
* @returns {TextMetrics}
|
|
411
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
|
|
412
|
-
*/
|
|
413
|
-
textmetrics(text, size = _fontSize) {
|
|
414
|
-
_ctx.font = `${_fontStyle} ${size}px ${_fontFamily}`;
|
|
415
|
-
const metrics = _ctx.measureText(text);
|
|
416
|
-
metrics.height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
|
|
417
|
-
return metrics;
|
|
418
|
-
},
|
|
419
394
|
/** IMAGE GRAPHICS API */
|
|
420
395
|
/**
|
|
421
396
|
* Draw an image
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e=new AudioContext,t=(t=1,a=.05,l=220,n=0,i=0,r=.1,o=0,s=1,c=0,f=0,
|
|
1
|
+
(()=>{var e=new AudioContext,t=(t=1,a=.05,l=220,n=0,i=0,r=.1,o=0,s=1,c=0,f=0,p=0,u=0,d=0,h=0,g=0,m=0,v=0,E=1,b=0,T=0,w=0)=>{let x=Math,y=2*x.PI,D=c*=500*y/44100/44100,H=l*=(1-a+2*a*x.random(a=[]))*y/44100,I=0,S=0,k=0,A=1,C=0,L=0,X=0,O=w<0?-1:1,z=y*O*w*2/44100,M=x.cos(z),P=x.sin,Y=P(z)/4,W=1+Y,F=-2*M/W,_=(1-Y)/W,R=(1+O*M)/2/W,G=-(O+M)/W,N=0,B=0,U=0,j=0;for(n=44100*n+9,b*=44100,i*=44100,r*=44100,v*=44100,f*=500*y/85766121e6,g*=y/44100,p*=y/44100,u*=44100,d=44100*d|0,t*=.3*(globalThis.zzfxV||1),O=n+b+i+r+v|0;k<O;a[k++]=X*t)++L%(100*m|0)||(X=o?1<o?2<o?3<o?P(I*I):x.max(x.min(x.tan(I),1),-1):1-(2*I/y%2+2)%2:1-4*x.abs(x.round(I/y)-I/y):P(I),X=(d?1-T+T*P(y*k/d):1)*(X<0?-1:1)*x.abs(X)**s*(k<n?k/n:k<n+b?1-(k-n)/b*(1-E):k<n+b+i?E:k<O-v?(O-k-v)/r*E:0),X=v?X/2+(v>k?0:(k<O-v?1:(O-k)/v)*a[k-v|0]/2/t):X,w&&(X=j=R*N+G*(N=B)+R*(B=X)-_*U-F*(U=j))),I+=(z=(l+=c+=f)*x.cos(g*S++))+z*h*P(k**5),A&&++A>u&&(l+=p,H+=p,A=0),!d||++C%d||(l=H,c=D,A=A||1);(t=e.createBuffer(1,O,44100)).getChannelData(0).set(a),(l=e.createBufferSource()).buffer=t,l.connect(e.destination),l.start()},a=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(e={}){let l=globalThis,n=Math.PI,i=2*n,r=requestAnimationFrame,o=[],s=(e,t,a)=>{e.addEventListener(t,a,!1),o.push(()=>e.removeEventListener(t,a,!1))};e=Object.assign({fps:60,fullscreen:!0,width:null,height:null,autoscale:!0,pixelart:!1,antialias:!1,canvas:null,global:!0,loop:null,pauseOnBlur:!0,tapEvents:!0,keyboardEvents:!0,animate:!0},e);let c=!1,f=[],p=e.canvas||document.createElement("canvas"),u=e.fullscreen,d=e.autoscale,h=e.animate,g=1,m,v=.5,E=1,b,T,w,x=0,y=!0,D="sans-serif",H=32,I=Date.now(),S=e.global,k={init:null,update:null,draw:null,resized:null,tap:null,untap:null,tapping:null,tapped:null},A={settings:Object.assign({},e),colors:a},C={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,CENTERX:0,CENTERY:0,MOUSEX:-1,MOUSEY:-1,DEFAULT_SFX:[.5,,1675,,.06,.2,1,1.8,,,637,.06],PI:n,TWO_PI:i,HALF_PI:.5*n,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n/180*e,rad2deg:e=>180/n*e,clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*Math.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let r=(e-t)/(a-t)*(n-l)+l;return i?C.clamp(r,l,n):r},norm:(e,t,a)=>C.map(e,t,a,0,1),rand:(e=0,t=1)=>(I=(1664525*I+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>Math.floor(C.rand(e,t+1)),seed:e=>null==e?I:I=~~e,cls(e){let t=m.canvas.width,a=m.canvas.height;null==e?m.clearRect(0,0,t,a):C.rectfill(0,0,t,a,e)},rect(e,t,a,l,n=0,i=null){m.beginPath(),m[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),C.stroke(n)},rectfill(e,t,a,l,n=0,i=null){m.beginPath(),m[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),C.fill(n)},circ(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,i),C.stroke(l)},circfill(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,i),C.fill(l)},line(e,t,a,l,n){m.beginPath();let i=.5*(0!==v&&~~e==~~a),r=.5*(0!==v&&~~t==~~l);m.moveTo(~~e+i,~~t+r),m.lineTo(~~a+i,~~l+r),C.stroke(n)},linewidth(e){m.lineWidth=~~e,v=.5*(~~e%2!=0)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,a,l=3,n="normal"){m.font=`${n} ${H}px ${D}`,m.fillStyle=C.getcolor(l),m.fillText(a,~~e,~~t)},textfont(e){D=e},textsize(e){H=e},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},image(e,t,a){m.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,r=m;if(n.width=e*i,n.height=t*i,(m=n.getContext("2d")).scale(i,i),a.push){let e=0,t=0;for(let l of(m.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&C.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(m);return m=r,n},ctx:e=>(e&&(m=e),m),push:()=>m.save(),pop:()=>m.restore(),translate:(e,t)=>m.translate(~~e,~~t),scale:(e,t)=>m.scale(e,t||e),rotate:e=>m.rotate(e),alpha(e){m.globalAlpha=C.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){m.fillStyle=C.getcolor(e),t?m.fill(t):m.fill()},stroke(e,t){m.strokeStyle=C.getcolor(e),t?m.stroke(t):m.stroke()},clip(e){m.clip(e)},sfx:(e,a=0,n=1)=>!(l.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||C.DEFAULT_SFX,(a>0||1!==n)&&((e=e.slice())[0]=n*(e[0]||1),e[10]=~~e[10]+a),t.apply(0,e),e),volume(e){l.zzfxV=+e},colrect:(e,t,a,l,n,i,r,o)=>e<n+r&&e+a>n&&t<i+o&&t+l>i,colcirc:(e,t,a,l,n,i)=>(l-e)**2+(n-t)**2<=(a+i)**2,use(e,t={}){c?M(e,t):f.push([e,t])},listen:(e,t)=>(k[e]=k[e]||new Set,k[e].add(t),()=>k[e].delete(t)),emit(e,t,a,l,n){z("before:"+e,t,a,l,n),z(e,t,a,l,n),z("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(e,t){C[e]=t,S&&(l[e]=t)},resize(e,t){C.setvar("WIDTH",p.width=e),C.setvar("HEIGHT",p.height=t||e),O()},timescale(e){E=e},setfps(e){w=1e3*(T=1/e),x=0},quit(){for(let e of(C.emit("quit"),o))e();if(y=k=!1,S){for(let e in C)delete l[e];delete l.__litecanvas}}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])C[e]=Math[e];function L(){c=!0;let t=e.loop?e.loop:l;for(let e in k)t[e]&&C.listen(e,t[e]);for(let[e,t]of f)M(e,t);if((u||d)&&s(l,"resize",O),O(),e.tapEvents){let e=(e,t)=>[(e-p.offsetLeft)/g,(t-p.offsetTop)/g],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,startX:a,startY:l,ts:performance.now()};return t.set(e,n),n},n=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},i=e=>e&&performance.now()-e.ts<=200,r=!1;s(p,"mousedown",t=>{t.preventDefault();let[l,n]=e(t.pageX,t.pageY);C.emit("tap",l,n,0),a(0,l,n),r=!0}),s(p,"mousemove",t=>{t.preventDefault();let[a,l]=e(t.pageX,t.pageY);C.setvar("MOUSEX",a),C.setvar("MOUSEY",l),r&&(C.emit("tapping",a,l,0),n(0,a,l))}),s(p,"mouseup",a=>{a.preventDefault();let l=t.get(0),[n,o]=e(a.pageX,a.pageY);i(l)&&C.emit("tapped",l.startX,l.startY,0),C.emit("untap",n,o,0),t.delete(0),r=!1}),s(p,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l.pageX,l.pageY);C.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),s(p,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a.pageX,a.pageY);C.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let o=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&C.emit("tapped",l.startX,l.startY,e),C.emit("untap",l.x,l.y,e),t.delete(e))};s(p,"touchend",o),s(p,"touchcancel",o),s(l,"blur",()=>{for(let[e,a]of(r=!1,t))C.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=new Set;C.setvar("iskeydown",t=>"any"===t?e.size>0:e.has(t.toLowerCase())),s(l,"keydown",t=>{e.add(t.key.toLowerCase())}),s(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),s(l,"blur",()=>e.clear())}e.pauseOnBlur&&(s(l,"blur",()=>{y=!1}),s(l,"focus",()=>{y=!0,r(X)})),C.setfps(e.fps),C.emit("init",C),b=performance.now(),r(X)}function X(e){let t=!h,a=e-b;for(x+=a>100?w:a,b=e;x>=w;)C.emit("update",T*E),C.setvar("ELAPSED",C.ELAPSED+T*E),x-=w,t=!0;t&&(C.textalign("start","top"),C.emit("draw")),y&&h&&r(X)}function O(){let t=l.innerWidth,a=l.innerHeight,n=p.style;n.display="block",u?(n.position="absolute",n.inset=0,C.setvar("WIDTH",p.width=t),C.setvar("HEIGHT",p.height=a)):d&&(n.margin="auto",g=Math.min(t/C.WIDTH,a/C.HEIGHT),g=(e.pixelart?~~g:g)||1,n.width=C.WIDTH*g+"px",n.height=C.HEIGHT*g+"px"),C.setvar("CENTERX",C.WIDTH/2),C.setvar("CENTERY",C.HEIGHT/2),(!e.antialias||e.pixelart)&&(m.imageSmoothingEnabled=!1,p.style.imageRendering="pixelated"),C.emit("resized",g),h||r(X)}function z(e,t,a,l,n){if(k[e])for(let i of k[e])i(t,a,l,n)}function M(e,t){let a=e(C,A,t);if("object"==typeof a)for(let e of Object.keys(a))C.setvar(e,a[e])}if(S){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,C),l.__litecanvas=C}return p="string"==typeof p?document.querySelector(p):p,C.setvar("CANVAS",p),m=p.getContext("2d"),s(p,"click",()=>l.focus()),C.WIDTH>0&&(u=!1),p.style="",p.width=C.WIDTH,p.height=C.HEIGHT||C.WIDTH,p.parentNode||document.body.appendChild(p),"loading"===document.readyState?s(l,"DOMContentLoaded",()=>r(L)):r(L),C}})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "litecanvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.72.0",
|
|
4
4
|
"description": "Lightweight HTML5 canvas engine suitable for small games and animations.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Luiz Bills <luizbills@pm.me>",
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"devDependencies": {
|
|
9
9
|
"@swc/core": "^1.10.15",
|
|
10
10
|
"ava": "^6.2.0",
|
|
11
|
-
"esbuild": "^0.
|
|
12
|
-
"prettier": "^3.
|
|
11
|
+
"esbuild": "^0.25.0",
|
|
12
|
+
"prettier": "^3.5.0"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://litecanvas.github.io/about.html",
|
|
15
15
|
"repository": {
|
package/src/index.js
CHANGED
|
@@ -75,8 +75,6 @@ export default function litecanvas(settings = {}) {
|
|
|
75
75
|
_focused = true,
|
|
76
76
|
/** @type {string} */
|
|
77
77
|
_fontFamily = 'sans-serif',
|
|
78
|
-
/** @type {string} */
|
|
79
|
-
_fontStyle = '',
|
|
80
78
|
/** @type {number} */
|
|
81
79
|
_fontSize = 32,
|
|
82
80
|
/** @type {number} */
|
|
@@ -313,10 +311,10 @@ export default function litecanvas(settings = {}) {
|
|
|
313
311
|
rect(x, y, width, height, color = 0, radii = null) {
|
|
314
312
|
_ctx.beginPath()
|
|
315
313
|
_ctx[radii ? 'roundRect' : 'rect'](
|
|
316
|
-
~~x
|
|
317
|
-
~~y
|
|
318
|
-
~~width,
|
|
319
|
-
~~height,
|
|
314
|
+
~~x - _outline_fix,
|
|
315
|
+
~~y - _outline_fix,
|
|
316
|
+
~~width + _outline_fix * 2,
|
|
317
|
+
~~height + _outline_fix * 2,
|
|
320
318
|
radii
|
|
321
319
|
)
|
|
322
320
|
instance.stroke(color)
|
|
@@ -354,13 +352,7 @@ export default function litecanvas(settings = {}) {
|
|
|
354
352
|
*/
|
|
355
353
|
circ(x, y, radius, color) {
|
|
356
354
|
_ctx.beginPath()
|
|
357
|
-
_ctx.arc(
|
|
358
|
-
~~x + _outline_fix,
|
|
359
|
-
~~y + _outline_fix,
|
|
360
|
-
~~radius,
|
|
361
|
-
0,
|
|
362
|
-
TWO_PI
|
|
363
|
-
)
|
|
355
|
+
_ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
|
|
364
356
|
instance.stroke(color)
|
|
365
357
|
},
|
|
366
358
|
|
|
@@ -389,10 +381,13 @@ export default function litecanvas(settings = {}) {
|
|
|
389
381
|
*/
|
|
390
382
|
line(x1, y1, x2, y2, color) {
|
|
391
383
|
_ctx.beginPath()
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
384
|
+
|
|
385
|
+
let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0
|
|
386
|
+
let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0
|
|
387
|
+
|
|
388
|
+
_ctx.moveTo(~~x1 + xfix, ~~y1 + yfix)
|
|
389
|
+
_ctx.lineTo(~~x2 + xfix, ~~y2 + yfix)
|
|
390
|
+
|
|
396
391
|
instance.stroke(color)
|
|
397
392
|
},
|
|
398
393
|
|
|
@@ -428,9 +423,10 @@ export default function litecanvas(settings = {}) {
|
|
|
428
423
|
* @param {number} y
|
|
429
424
|
* @param {string} text the text message
|
|
430
425
|
* @param {number} [color=3] the color index
|
|
426
|
+
* @param {string} [fontStyle] can be "normal" (default), "italic" and/or "bold".
|
|
431
427
|
*/
|
|
432
|
-
text(x, y, text, color = 3) {
|
|
433
|
-
_ctx.font = `${
|
|
428
|
+
text(x, y, text, color = 3, fontStyle = 'normal') {
|
|
429
|
+
_ctx.font = `${fontStyle} ${_fontSize}px ${_fontFamily}`
|
|
434
430
|
_ctx.fillStyle = instance.getcolor(color)
|
|
435
431
|
_ctx.fillText(text, ~~x, ~~y)
|
|
436
432
|
},
|
|
@@ -453,15 +449,6 @@ export default function litecanvas(settings = {}) {
|
|
|
453
449
|
_fontSize = size
|
|
454
450
|
},
|
|
455
451
|
|
|
456
|
-
/**
|
|
457
|
-
* Sets whether a font should be styled with a "normal", "italic", or "bold".
|
|
458
|
-
*
|
|
459
|
-
* @param {string} style
|
|
460
|
-
*/
|
|
461
|
-
textstyle(style) {
|
|
462
|
-
_fontStyle = style || ''
|
|
463
|
-
},
|
|
464
|
-
|
|
465
452
|
/**
|
|
466
453
|
* Sets the alignment used when drawing texts
|
|
467
454
|
*
|
|
@@ -475,24 +462,6 @@ export default function litecanvas(settings = {}) {
|
|
|
475
462
|
if (baseline) _ctx.textBaseline = baseline
|
|
476
463
|
},
|
|
477
464
|
|
|
478
|
-
/**
|
|
479
|
-
* Returns a TextMetrics object that contains information about the measured text (such as its width, for example)
|
|
480
|
-
*
|
|
481
|
-
* @param {string} text
|
|
482
|
-
* @param {number} [size]
|
|
483
|
-
* @returns {TextMetrics}
|
|
484
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
|
|
485
|
-
*/
|
|
486
|
-
textmetrics(text, size = _fontSize) {
|
|
487
|
-
// prettier-ignore
|
|
488
|
-
_ctx.font = `${_fontStyle} ${size}px ${_fontFamily}`
|
|
489
|
-
const metrics = _ctx.measureText(text)
|
|
490
|
-
metrics.height =
|
|
491
|
-
metrics.actualBoundingBoxAscent +
|
|
492
|
-
metrics.actualBoundingBoxDescent
|
|
493
|
-
return metrics
|
|
494
|
-
},
|
|
495
|
-
|
|
496
465
|
/** IMAGE GRAPHICS API */
|
|
497
466
|
/**
|
|
498
467
|
* Draw an image
|
package/types/index.d.ts
CHANGED
|
@@ -320,8 +320,15 @@ declare global {
|
|
|
320
320
|
* @param y
|
|
321
321
|
* @param text the text message
|
|
322
322
|
* @param [color=3] the color index
|
|
323
|
+
* @param [style="normal"] can be "normal" (default), "italic" and/or "bold"
|
|
323
324
|
*/
|
|
324
|
-
function text(
|
|
325
|
+
function text(
|
|
326
|
+
x: number,
|
|
327
|
+
y: number,
|
|
328
|
+
text: string,
|
|
329
|
+
color?: number,
|
|
330
|
+
style?: string
|
|
331
|
+
): void
|
|
325
332
|
/**
|
|
326
333
|
* Set the font family
|
|
327
334
|
*
|
|
@@ -334,12 +341,6 @@ declare global {
|
|
|
334
341
|
* @param size
|
|
335
342
|
*/
|
|
336
343
|
function textsize(size: string): void
|
|
337
|
-
/**
|
|
338
|
-
* Sets whether a font should be styled with a normal, italic, or bold.
|
|
339
|
-
*
|
|
340
|
-
* @param style
|
|
341
|
-
*/
|
|
342
|
-
function textstyle(style: string): void
|
|
343
344
|
/**
|
|
344
345
|
* Sets the alignment used when drawing texts
|
|
345
346
|
*
|
|
@@ -349,14 +350,6 @@ declare global {
|
|
|
349
350
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
|
|
350
351
|
*/
|
|
351
352
|
function textalign(align: string, baseline: string): void
|
|
352
|
-
/**
|
|
353
|
-
* Returns a TextMetrics object that contains information about the measured text (such as its width, for example)
|
|
354
|
-
*
|
|
355
|
-
* @param text
|
|
356
|
-
* @param [size]
|
|
357
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
|
|
358
|
-
*/
|
|
359
|
-
function textmetrics(text: string, size?: number): TextMetrics
|
|
360
353
|
|
|
361
354
|
/** IMAGE GRAPHICS API */
|
|
362
355
|
/**
|
package/types/types.d.ts
CHANGED
|
@@ -298,8 +298,15 @@ type LitecanvasInstance = {
|
|
|
298
298
|
* @param y
|
|
299
299
|
* @param text the text message
|
|
300
300
|
* @param [color=3] the color index
|
|
301
|
+
* @param [style="normal"] can be "normal" (default), "italic" and/or "bold"
|
|
301
302
|
*/
|
|
302
|
-
text(
|
|
303
|
+
text(
|
|
304
|
+
x: number,
|
|
305
|
+
y: number,
|
|
306
|
+
text: string,
|
|
307
|
+
color?: number,
|
|
308
|
+
style?: string
|
|
309
|
+
): void
|
|
303
310
|
/**
|
|
304
311
|
* Set the font family
|
|
305
312
|
*
|
|
@@ -312,12 +319,6 @@ type LitecanvasInstance = {
|
|
|
312
319
|
* @param size
|
|
313
320
|
*/
|
|
314
321
|
textsize(size: string): void
|
|
315
|
-
/**
|
|
316
|
-
* Sets whether a font should be styled with a normal, italic, or bold.
|
|
317
|
-
*
|
|
318
|
-
* @param style
|
|
319
|
-
*/
|
|
320
|
-
textstyle(style: string): void
|
|
321
322
|
/**
|
|
322
323
|
* Sets the alignment used when drawing texts
|
|
323
324
|
*
|
|
@@ -327,14 +328,6 @@ type LitecanvasInstance = {
|
|
|
327
328
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
|
|
328
329
|
*/
|
|
329
330
|
textalign(align: string, baseline: string): void
|
|
330
|
-
/**
|
|
331
|
-
* Returns a TextMetrics object that contains information about the measured text (such as its width, for example)
|
|
332
|
-
*
|
|
333
|
-
* @param text
|
|
334
|
-
* @param [size]
|
|
335
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
|
|
336
|
-
*/
|
|
337
|
-
textmetrics(text: string, size?: number): TextMetrics
|
|
338
331
|
|
|
339
332
|
/** IMAGE GRAPHICS API */
|
|
340
333
|
/**
|