Trying to pass context to my WordPress block

Question

I am building a custom WordPress block using ES5, and I have a function in the edit to get the canvas:

function imgclickHandler(event) {
  myPics = document.getElementById('myPics');
  context = myPics.getContext('2d');
  isDrawing = true;
  x = event.clientX;
  y = event.clientY;
  var coords = "X coords: " + x + ", Y coords: " + y;
  //alert(isDrawing);
}

The code is failing to find myPics = document.getElementById('myPics'); the canvas in the HTML is coming out with the ID as myPics, but I don't think the JavaScript is getting the element.

score 0 · Answer 1 · answered May 21 '21 at 16:30

0

I would recommend using useRef to access DOM elements:

function CanvasElement() {
    const canvasEl = useRef(null);
    
    return (
        <canvas ref={ canvasEl }></canvas>
    );
}

Then you can access the DOM element using canvasEl.current:

canvasEl.current.getContext('2d');

See also: How to access a DOM element in React?

answered May 21 '21 at 16:30

Phil

1,849
4
24
38

This is how I genereate my canvas to get a better idea of what im working with thanks wp.element.createElement( wp.blockEditor.RichText.Content, { tagName: 'canvas', id: 'canvas', width: '560', height: '360', onClick: imgclickHandler, onMouseMove: imgclickDrawHandler, onMouseUp: imgOffclickHandler } – Aneuroo May 21 '21 at 17:55

score 0 · Answer 2 · answered May 27 '21 at 15:57

This works as it should and get the context to the correct place

    function canvasonclickHandler(event) {
          canvas = document.getElementById("canvas");
          context = canvas.getContext("2d");
          rect =canvas.getBoundingClientRect();
          xset = event.clientX - rect.left;;
          yset = event.clientY - rect.top;
          isDrawing = true;
          //alert("x: "+ x +"y: "+ y);

    }

Trying to pass context to my WordPress block

2 Answers2