Clear canvas

[CodingCarlos]

Hi!

I'm playing with the previewer app to see what can I build, and I've got problems when I try to clear some section.

Here is the simplest version of the code I'm trying to get working:

var anypixel = require('anypixel'); 
var ctx = anypixel.canvas.getContext2D();

/**
 * On load, draw a square
 */
document.addEventListener('DOMContentLoaded', function() {
  ctx.fillStyle = '#F00';
  ctx.fillRect(0, 0, 10, 10); // This is happening as expected
});

/**
 * On button down, clear the square
 */
document.addEventListener('onButtonDown', function(event) {
  ctx.clearRect(0, 0, 10, 10); // This is not working
});

I can only see it working (in the preview app) when I enable the color correction mode, but without it, the square still drown.

I think I'm not doing something in the right way, but I couldn't be able to find any documentation.

Thanks!

---

Tested on Ubuntu Linux 16.04, with Chrome 71, Chromium 71 and Firefox 64

[ryburke]

Hi Carlos, what color are you drawing the square?

[CodingCarlos]

In this example, red:

ctx.fillStyle = '#F00';

But I've tried with a lot of colors, and no one is cleared.

[CodingCarlos]

After some testing, I've discovered that if I paint the square in black (pure black, #000), the pixel seems to be off. So, I am able to clear all the canvas by painting it black:

const anypixel = require('anypixel'); 
const ctx = anypixel.canvas.getContext2D();
const INC_W = anypixel.config.width;
const INC_H = anypixel.config.height;

function clear() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, INC_W, INC_H);
}

clear();

As feedback, it's a little bit weird for me to clear a pixel by painting it black, instead of using the canvas clearRect function. Anyway, It is working, so I'm closing the issue.

Thanks, @ryburke for the color tip :wink:

[ryburke]

@CodingCarlos the previewer is meant to be a representation of the physical installation that is built with LEDs. LEDs can't produce black light so black is equivalent to LED off.

Keep this mental model in mind – that the previewer represents a physical LED installation – as you continue to develop. All things here are in service of that.

:)