0

I am currently trying to create a game in javascript and I wanted to use a jpg image I've drawn as a sprite and put it into a canvas, then further control the sprite to make it move left and right, but I can't seem to figure out how to let the image show in the canvas

I've searched up some similar questions such as this: How to add image to canvas The image I am adding is not from a browser but a downloaded image on the desktop of my computer.

I used the code in the above solution but it does not show the image 

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

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'pic.jpg';
  base_image.onload = function(){
  context.drawImage(base_image, 0, 0);
  }
}

I do not want the image to be a background but rather an image that can be used as a character(like a sprite in a game). Is there any other solutions to this problems or is there anything I'm doing wrong.

Syn3rg1c
  • 1
  • 1
  • 2
    Possible duplicate of [How to load a .jpg from an URI to canvas?](https://stackoverflow.com/questions/39126143/how-to-load-a-jpg-from-an-uri-to-canvas) – Mosè Raguzzini May 06 '19 at 15:16
  • Is there any other image or something that could be messing with your image? The code is fine, but there's something else messing up. Probably a CORS problem (like in the post from the above comment) – Mauricio Cárdenas May 06 '19 at 15:20
  • If you want to make a game, i would suggest you look into pixi.js. It's a javascript 2D game engine that easy handles such things for you. – Kai Lehmann May 06 '19 at 15:57
  • @kai Lehmann I'll look into it, thanks – Syn3rg1c May 06 '19 at 22:49

0 Answers0