CanvasKit: "failed to create webgl context: err 0"
114 views
Skip to first unread message
tracyma
Sep 7, 2022, 2:34:42 AM9/7/22
to skia-discuss
Hi,
i'm playing with CanvasKit and follow the `example.html` in package,
but the CanvasKit cannot be inited correctly, don't know why, any idea? TIA!
my html:
```
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CanvasKitDemo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
<script type="text/javascript" charset="utf-8" src="./script.js" async></script>
</body>
</html>
```
script.js:
```
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext('2d')
var CanvasKit = null;
// Init CanvasKit
const ckLoaded = CanvasKitInit({
locateFile: (file) => 'node_modules/canvaskit-wasm/bin/' + file
});
// download image
const xImage = fetch('https://dmitripavlutin.com/static/9c3167b4faea80d10cdc301db4910c9c/1c4ff/louvre.jpg').then((response) => response.arrayBuffer());
const ready = async function () {
try {
return await ckLoaded;
} catch (e) {
console.log(e);
return null;
}
}();
ready.then((initData) => {
const CK = initData;
CanvasKit = CK;
});
Promise.all([ckLoaded, xImage]).then((results) => { DecodeAPI(...results) });
async function DecodeAPI(CanvasKit, imgData) {
if (!CanvasKit || !imgData) {
return;
}
const surface = CanvasKit.MakeCanvasSurface('canvas');
if (!surface) {
console.error('Could not make surface');
return;
}
const blob = new Blob([imgData]);
// ImageBitmap is not supported in Safari
const imageBitmap = await createImageBitmap(blob);
const img = await CanvasKit.MakeImageFromCanvasImageSource(imageBitmap);
surface.drawOnce((canvas) => {
canvas.drawImage(img, 0, 0, null);
});
}
let ctx = canvas.getContext('2d')
var CanvasKit = null;
// Init CanvasKit
const ckLoaded = CanvasKitInit({
locateFile: (file) => 'node_modules/canvaskit-wasm/bin/' + file
});
// download image
const xImage = fetch('https://dmitripavlutin.com/static/9c3167b4faea80d10cdc301db4910c9c/1c4ff/louvre.jpg').then((response) => response.arrayBuffer());
const ready = async function () {
try {
return await ckLoaded;
} catch (e) {
console.log(e);
return null;
}
}();
ready.then((initData) => {
const CK = initData;
CanvasKit = CK;
});
Promise.all([ckLoaded, xImage]).then((results) => { DecodeAPI(...results) });
async function DecodeAPI(CanvasKit, imgData) {
if (!CanvasKit || !imgData) {
return;
}
const surface = CanvasKit.MakeCanvasSurface('canvas');
if (!surface) {
console.error('Could not make surface');
return;
}
const blob = new Blob([imgData]);
// ImageBitmap is not supported in Safari
const imageBitmap = await createImageBitmap(blob);
const img = await CanvasKit.MakeImageFromCanvasImageSource(imageBitmap);
surface.drawOnce((canvas) => {
canvas.drawImage(img, 0, 0, null);
});
}
```
Anil Soni
Nov 10, 2022, 2:36:48 AM11/10/22
to skia-discuss
Your machine might not support the latest WebGL.
You may specify min/max WebGL version.
You may specify min/max WebGL version.
const surface = CanvasKit.MakeWebGLCanvasSurface(canvasElement, null,{ minorVersion : 1 , majorVersion : 1});
Reply all
Reply to author
Forward
0 new messages