p5.js clear() function is not working properly in mobile and some browsers

Question

The HTML I've used is very simple which is given below:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    <script src="sketch.js"></script>
</head>
<body>

</body>
</html>

The sketch.js file is here:

function setup() {
    createCanvas(500, 500);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
    clear();
}

I've followed exactly as in the example, but the clear is only working on some portion of it, not the whole canvas. I tried in different browsers on different PCs, some of it works good and some are not. Also all mobile chrome browsers have the same issue.

Below is a screenshot of how it looks in my browser:

what is the content of this `clear()` method? maybe the cleared size (somewhere inside the clear()) is less than 500? — samAlvin, Jul 06 '18 at 11:11
@samAlvin here is an example: https://codepen.io/anon/pen/XYLYVE — Ramkrishna Pal, Jul 06 '18 at 11:35
@samAlvin Please note the [tag:p5.js] tag. The `clear()` function is provided by P5.js. — Kevin Workman, Jul 06 '18 at 16:50

almcd · Answer 1 · 2019-01-10T08:47:46.073

It looks like this is a known bug in p5.js that affects retina screens - https://github.com/processing/p5.js/issues/2846

There's already a fix for it - https://github.com/processing/p5.js/pull/2852 - but it hasn't been released at the time of writing.

In the interim using $("canvas")[0].getContext('2d').clearRect(0,0,width,height); instead of calling the clear method will have the desired effect. For example:

function setup() {
    createCanvas(500, 500);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
    $("canvas")[0].getContext('2d').clearRect(0,0,width,height);
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>

score 0 · Answer 2 · answered Jul 06 '18 at 16:49

Another option is to call the pixelDensity(1) function:

function setup() {
    pixelDensity(1);
    createCanvas(500, 500);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
    clear();
}

More info can be found in the reference:

By default pixel density is set to match display density, call pixelDensity(1) to turn this off.

p5.js clear() function is not working properly in mobile and some browsers

2 Answers2