import { canvas2d , imagePromise } from "@thi.ng/pixel/canvas" ; import { GRAY_ALPHA8 } from "@thi.ng/pixel/format/gray-alpha8" ; import { GRAY8 } from "@thi.ng/pixel/format/gray8" ; import { RGB565 } from "@thi.ng/pixel/format/rgb565" ; import { intBufferFromImage } from "@thi.ng/pixel/int" ; import { SRC_OVER_I } from "@thi.ng/porter-duff/porter-duff" ; import IMG from "./haystack.jpg" ; import LOGO from "./logo-64.png" ; Promise . all ( [ IMG , LOGO ] . map ( ( x ) => imagePromise ( x ) ) ) . then ( ( [ img , logo ] ) => { const buf = intBufferFromImage ( img , RGB565 , 256 , 256 ) ; intBufferFromImage ( logo , GRAY_ALPHA8 ) . premultiply ( ) . blend ( SRC_OVER_I , buf , { dx : 10 , dy : 10 , } ) ; const region = buf . getRegion ( 32 , 96 , 128 , 64 ) ; region . blit ( buf , { dx : 96 , dy : 32 } ) ; const ctx = canvas2d ( buf . width , buf . height * 3 ) ; buf . blitCanvas ( ctx . canvas ) ; const id = 0 ; const ch = buf . getChannel ( id ) . invert ( ) ; for ( let y = 0 ; y < ch . height ; y += 2 ) { for ( let x = ( y >> 1 ) & 1 ; x < ch . width ; x += 2 ) { ch . setAt ( x , y , 0xff ) ; } } buf . setChannel ( id , ch ) ; buf . blitCanvas ( ctx . canvas , 0 , buf . height ) ; buf . as ( GRAY8 ) . blitCanvas ( ctx . canvas , 0 , buf . height * 2 ) ; document . body . appendChild ( ctx . canvas ) ; } ) ;