Как исправить изображение, не отображаемое на холсте

Question

Я пытаюсь разместить изображение на холсте, чтобы использовать его в небольшой игре, которую я создаю в JS, для практики функционального программирования.

Я искал некоторые учебники по обещаниям и функциональному программированию, но пока не нашел решения.

Это мой код:

function loadImage(url) {

    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.src = url;
    });
}

const canvas = document.getElementById('bitchinBlock')
const context= canvas.getContext('2d');

context.scale(20, 20);

loadImage('media/images/ball.png')
    .then(image => {
    context.drawImage(image, 100, 100);
    });

const cube = [
    [1, 1],
    [1, 1]
];

function collide(arena, player) {

    const [c, o] = [player.cube, player.pos];
    for (let y = 0; y < c.length; ++y) {
        for (let x=0; x < c[y].length; ++x) {
            if (c[y][x] !== 0 &&
               (arena [y + o.y] &&
               arena[y + o.y][x + o.x]) !== 0) {
                   console.log(true);
                   return true;
            }
        }
    }

    return false;
}

function createMatrix(w, h) {
    const matrix = [];
    while (h--) {
        matrix.push(new Array(w).fill(0));   
    }
    return matrix;
}

function merge(arena, player) {

    player.cube.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                arena[y + player.pos.y][x + player.pos.x] = value;
            }
        });
    });
}


function draw() {
    context.fillStyle = '#0b033f';
    context.fillRect(0, 0, canvas.width, canvas.height);

    drawCube(player.cube, player.pos);



}


function drawCube(cube, offset){

    cube.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                context.fillStyle = '#ff3dff';
                context.fillRect( x + offset.x,
                                  y + offset.y,
                                  1, 1);                
            }
        });
    });
}




function update() {
    draw();
    requestAnimationFrame(update);
}

const arena = createMatrix(25, 20); 

const player = {
    pos: {x: 0, y: 0},
    cube: cube
}

function playerMoveX(offset) {
    player.pos.x += offset;
    if (collide(arena, player)) {
        console.log('boom');
        player.pos.x -= offset;
    }
}

function playerMoveY(offset) {
    player.pos.y += offset;
    if (collide(arena, player)) {
        console.log('bemmm');
        player.pos.y -= offset;
    }
}

document.addEventListener('keydown', event => {
    if (event.keyCode === 37) {
        playerMoveX(-1)
        console.log('pressed left. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    } else if (event.keyCode === 39) {
        playerMoveX(1)
        console.log('pressed right. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    } else if (event.keyCode === 38) {
        playerMoveY(-1)
        console.log('pressed up. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    } else if (event.keyCode === 40) {
        playerMoveY(1)
        console.log('pressed down. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    }
})

update();

У меня проблемы с:

function loadImage(url) {

    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.src = url;
    });
}

и:

loadImage('media/images/ball.png')
    .then(image => {
    context.drawImage(image, 100, 100);
    });

Может быть, это порядок, в котором размещены мои функции? Я не знаю.

Я хочу, чтобы оно показывало мое изображение на холсте, а остальное я постараюсь выяснить сам. Я сейчас нахожусь у стены.

Спасибо, что нашли время прочитать мой вопрос. Если вы заняты, не стесняйтесь отвечать.

Answer 1

Для меня это работает нормально. пожалуйста, проверьте это.

https://codepen.io/samma89/pen/MRyGZM

Может быть, вы упускаете это.

<canvas id="bitchinBlock"></canvas>

Answer 2

Когда я проверяю ваш код с помощью jsfiddle.Я обнаружил, что нет ничего плохого в функции, которую вы упоминаете.Ниже приведен код, который я пробовал.

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext("2d")
//ctx.fillRect( 10, 10, 10, 10 )

function loadImage( url ) {
	let image = new Image()
  image.setAttribute( 'crossOrigin', 'Anonymous' )
  image.src = url
  return new Promise( ( resolve, reject ) => {
  	image.addEventListener('load', function() {
    	resolve( this )
    } )
  } )
}

loadImage( 'http://i.imgur.com/3tU4Vig.jpg' )
  .then( function( image ) {
  	ctx.drawImage( image, 0, 0 )
  } )

<canvas></canvas>

Я считаю, что проблема в том, что размер вашего холста слишком мал.Поэтому при рендеринге изображения на холсте.Изображение отображается вне холста, поэтому вы не можете видеть изображения на нем.