Entrar | Registrar | FAQ
Anonymous

Referencing canvas inside a function's scope

+ Postar uma resposta

2 Mensagens Página 1 de 1


Referencing canvas inside a function's scope

por greg79 » Qua Dez 13, 2017 6:25 pm

I get error with this code, it seems like ctx is not known inside the function. How can I reference the canvas from within the function?


Código: Selecionar tudo
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");

var isDrawing = false;
var mX, mY, rX, rY;

 
function InitThis() {


    c.onmousedown = function(e) {
      isDrawing = true;
      mX = e.clientX;
      mY = e.clientY;
      };

    c.onmousemove = function(e) {
        if (isDrawing) {
          rX = e.clientX;
          rY = e.clientY;
          draw();
          ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    };

    c.onmouseup = function(e) {
      rX = e.clientX;
      rY = e.clientY;
      isDrawing = false;
  }

}

function draw() {
   
    ctx.beginPath();
    ctx.moveTo(mX,mY);
    ctx.lineTo(rX, rY);
    ctx.closePath();
    ctx.stroke();

}

InitThis()



The error: "ReferenceError: canvas is not defined
at HTMLCanvasElement.InitThis.c.onmousemove (zivuqeyure.js:22:31)"



Any idea how can I fix this?
Avatar de usuário

greg79

  • Mensagens: 1
  • Data de registro: Qua Dez 13, 2017 6:20 pm

Re: Referencing canvas inside a function's scope

por taynguyenem » Seg Fev 05, 2018 3:33 pm

Hi
You need add link to js of canvas.
Ex: https://cdnjs.cloudflare.com/ajax/libs/ ... anvasjs.js
Hope it help to you.
Avatar de usuário

taynguyenem

  • Mensagens: 21
  • Data de registro: Seg Fev 05, 2018 3:28 pm
--
Preview site only Html: teamviewdownload.com, winrarfree.net


+ Postar uma resposta

Página 1 de 1