Drawing context and p5.Graphics

vjjv · May 28, 2022, 8:09am

Hello!
I was using this function to generate quick shadows:

  drawingContext.shadowColor = color(0, 0, 0, 0.6);
  drawingContext.shadowBlur = 50;
  drawingContext.shadowOffsetX = -25;
  drawingContext.shadowOffsetY = -25;

but now im inside a pgraphics and cant it make it work. Its possible?
Any ideas?

GoToLoop · May 28, 2022, 11:08am

A p5.Graphics object has a property named _renderer which points to a p5.Renderer object:

github.com

processing/p5.js/blob/v1.4.1/src/core/p5.Graphics.js#L50-L54


      
          if (r === constants.WEBGL) {
            this._renderer = new p5.RendererGL(this.canvas, this, false);
          } else {
            this._renderer = new p5.Renderer2D(this.canvas, this, false);
          }

Which in turn has a property called drawingContext that you’re looking for:

github.com

processing/p5.js/blob/v1.4.1/src/core/p5.Renderer2D.js#L15-L20


      
          p5.Renderer2D = function(elt, pInst, isMainCanvas) {
            p5.Renderer.call(this, elt, pInst, isMainCanvas);
            this.drawingContext = this.canvas.getContext('2d');
            this._pInst._setProperty('drawingContext', this.drawingContext);
            return this;
          };

Topic		Replies	Views
Separating effects Coding Questions	5	548	September 8, 2021
createShader() not working on p5.Graphics Coding Questions	4	611	March 17, 2021
Use Webgl2 in p5js Project Guidance	1	813	November 23, 2021
Big Picture question on WebGL 2.0 p5.js homework	4	786	May 21, 2021
Methods bound to p5 "canvas" vs. offscreen p5 "graphics" Beginners	5	822	November 7, 2021

Drawing context and p5.Graphics

Related topics