I'm trying to create a HTML5 canvas with a simple gradient in LWC. However, it's all black. The code I'm trying is almost completely copied from W3C (except it's adjusted for LWC).
HTML
<template>
<div class="chart" lwc:dom="manual"></div>
</template>
JS
import { LightningElement } from 'lwc';
export default class CanvasTest extends LightningElement {
rendered = false;
renderedCallback() {
if (this.rendered) {
return;
}
this.rendered = true;
const canvas = document.createElement('canvas');
this.template.querySelector('div.chart').appendChild(canvas);
const ctx = canvas.getContext('2d');
// Create gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'white');
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
}
}
I've tried a few non-gradient canvas functionalities and everything seems ok, but I can't get gradients to work at all. How can I fix this?
fillStyle
is defaulting to#000000
in an org – Brett Nelson Sep 12 '19 at 16:46createLinearGradient
might not be available in the Locker Service twitter.com/GrayJustise/status/1172192318461366272?s=20 – Brett Nelson Sep 12 '19 at 17:28