Colocar imagem dentro do canvas com Javascript utilizando objeto construtor e literal

[Ederson Pereira de Brito]

Estamos tentando criar um mapa de rede utilizando canvas mas estamos encontrando algumas dificuldade, uma das dificuldade é na função construtora de objetos, no código abaixo usamos o objeto literal e funciona como esperado.

function q(event) {

    event = event || window.event;

    var canvas = document.getElementById('canvas'),

     x = event.pageX - canvas.offsetLeft,

        y = event.pageY - canvas.offsetTop;

        var canvas = document.getElementById('canvas');

     var context = canvas.getContext('2d');

     var coordenadas = new Image();

     

     coordenadas.width = x;

     coordenadas.height = y;

     coordenadas.src = 'imagens/servidor.png';

      coordenadas.onload = function() {

         context.drawImage(coordenadas, coordenadas.width - 50, coordenadas.height - 50);

        };

        console.log(coordenadas)

        context.clearRect( 0, 0, 600, 300);

}

Ao utilizar uma função construtora de objeto nao conseguimos mostrar a imagem no canvas, o canvas nao intende o endereço da imagem ele interpreta apenas como uma string. Código abaixo de exemplo que nao mostra a imagem no canvas.

   function Image(x, y){

      this.width = x;

      this.height = y;

      this.src = src ; 

     };

var coordenadas = new Image(x,y,'imagens/servidor.png');

Caso alguém tenha uma ideia melhor de como criar um mapa de rede onde posso arrastar dispositivos e interligar utilizando o canvas fico grato pela dica.

[Ederson Pereira de Brito]

Corrigindo o código construtor incluindo o parâmetro src, na primeira postagem esqueci de por.

Mesmo assim nao funciona.

function Image(x, y, src){

      this.width = x;

      this.height = y;

      this.src = src ; 

     };