CanvasKit - Clearing the canvas has no effect

131 views
Skip to first unread message

Micha

unread,
Aug 23, 2022, 8:56:01 AM8/23/22
to skia-discuss
It seems as if calling "clear" on a CanvasKit's canvas has no effect. The JavaScript-Code in question is ('hello-skia.js'):

--------------------------

const ckLoaded = CanvasKitInit({
    locateFile: (file) => '/node_modules/canvaskit-wasm/bin/'+file});
ckLoaded.then((CanvasKit) => {
  const paint = new CanvasKit.Paint();

   function drawFrame(canvas)
    {
      // Clear background
      canvas.clear(CanvasKit.LTGREY);

      paint.setColor(CanvasKit.RED);

      // Draw a rectangle with red paint
      rect = CanvasKit.LTRBRect(10, 10, 128, 128);
      canvas.drawRect(rect, paint);
       ...
      surface.requestAnimationFrame(drawFrame);
    }
    surface.requestAnimationFrame(drawFrame);
  });

------------

HTML file is as simple as this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World, Skia</title>
    </head>
    <body>
        <script type = "text/javascript" src="/node_modules/canvaskit-wasm/bin/canvaskit.js"></script>
        <script type = "text/javascript" src="src/hello-skia.js"></script>
    <canvas id=skia-canvas width=500 height=500></canvas>
    </body>
</html>
------------------

The red rectangle is drawn as expected, but the canvas it not cleared to light grey background. Did anybody encounter this? Does the canvas need special setup in order to be able to be cleared? Thanks for help, Michael.

corey....@gmail.com

unread,
Aug 25, 2022, 11:58:56 AM8/25/22
to skia-discuss
There is no CanvasKit.LTGREY.  So you get nothing.
Try CanvasKit.Color(200, 200, 200, 1.0)  or what not.

Micha

unread,
Aug 25, 2022, 2:48:56 PM8/25/22
to skia-discuss
Thank you! I'll check this out.

Micha

unread,
Sep 5, 2022, 7:14:02 AM9/5/22
to skia-discuss
Thank you, helped for me.
I supposed that the color constants available in classical c++ skia would be all also available in CanvasKit/JavaScript Skia. However this is not the case for all of them. Common colors like "RED" are available in both scenarios, but "LTGREY" is not
Reply all
Reply to author
Forward
0 new messages