processing/p5.js

noSmooth() breaks positioned WEBGL canvas

Open

#7,548 opened on Feb 15, 2025

View on GitHub
 (9 comments) (0 reactions) (0 assignees)JavaScript (20,784 stars) (3,178 forks)batch import
Area:CoreArea:WebGLBugGood First IssueHelp Wanted

Description

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

1.11.3

Web browser and version

Chrome 133.0.6943.54

Operating system

MacOS

Steps to reproduce this

Steps:

  1. createCanvas(), position it, add noSmooth() in the draw()
  2. 2D renderer, no problem
  3. WEBGL, breaks, creates new empty canvas?

Perhaps one isn't supposed to use noSmooth() in the draw? I don't remember hitting this issue, but maybe never tried it before... Is that how it's supposed to behave? The refs only show examples of it in the setup(), but it doesn't state anywhere that's the only spot for it to go. In 2D renderer, it doesn't cause an issue, so is it normal in WEBGL or a bug?

Snippet:


function setup() {
	let cvn = createCanvas(300, 300)
	cvn = createCanvas(300, 300, WEBGL) // breaks with noSmooth() below
	cvn.position(150, 50)
	
	background(0, 0, 255)
	circle(0, 0, 100)
}

function draw(){
	noSmooth() // breaks sketch in WEBGL mode
}

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
familiarity with p5.jsbasic WebGL understanding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the behavior of noSmooth() in WEBGL mode when called inside draw(). Look at the p5.js source code, particularly the WebGL renderer (likely src/webgl/p5.RendererGL.js), to understand how noSmooth() interacts with canvas positioning and context creation. Check existing tests for noSmooth() in WebGL to see if this is a known limitation. Review comments in the issue for any additional clues or reproduction details from maintainers.