Source code
Revision control
Copy as Markdown
Other Tools
class CanvasWidget extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>
#child {
width: 100px;
height: 100px;
background: var(--rect-color, black);
}
#canvas {
background: grey;
}
</style>
<canvas id=canvas width="200" height="200" layoutsubtree>
<div id=child></div>
</canvas>
`;
this.canvas = this.shadowRoot.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
}
connectedCallback() {
this.canvas.addEventListener('paint', (event) => {
const customEvent = new CustomEvent(
'paint-received', {detail: {}, bubbles: true, composed: true});
let child = this.shadowRoot.getElementById('child');
this.ctx.drawElementImage(child, 20, 30);
this.dispatchEvent(customEvent);
});
this.canvas.requestPaint();
}
}
customElements.define('canvas-widget', CanvasWidget);