0xD34F

Пусть дефолтными номерами строк, на которых надо рисовать символы, будут не единицы, а случайные отрицательные значения. Т.е., drops[x] = 1; замените на, например

drops[x] = -Math.random() * canvas.height / font_size | 0;

https://jsfiddle.net/zu6mnxpy/

Вместо изменения координат, в которых вы рисуете объект, меняйте точку отсчёта системы координат, а само рисование выполняйте в (0, 0). Т.е., вместо context.translate(120, 120); сделайте context.translate(120 + x_pos, 120);, а context.fillRect(x_pos, 0, 100, 100); замените на context.fillRect(0, 0, 100, 100);.

Заверните код в класс и создавайте столько экземпляров, сколько потребуется.

https://jsfiddle.net/zx7dqjfp/

https://jsfiddle.net/95fjzq2g/

img.onload = () => canvas.getContext('2d').drawImage(img, 0, 0);

https://jsfiddle.net/jqru7zt6/

А-а-а-а-а-а-а-а-а!!!!!!111111


Во-первых, всё это делается в одну строку (функция selectPixel может быть сокращена точно так же):

const calcRowAndColumn = coord => Math.floor(coord / 4);

Во-вторых, возьмём, например, следующий кусок:

if (coordinates > 112 && coordinates < 116) {
  currPosition = 28;
}
if (coordinates > 116 && coordinates < 120) {
  currPosition = 29;
}

Пусть coordinates равен 116. Чему тогда будет равен currPosition? А ничему, undefined - строгие неравенства, больше-меньше, 116 никак не обрабатывается. И остальные граничные значения, кратные четырём, тоже. Это, если что, причина получаемых вами ошибок - эти undefined вы пытаетесь использовать как индексы многомерного массива.

Сгенерировали одну координату, через уравнение эллипса нашли ограничения для второй, сгенерировали вторую.

const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;

const ctx = canvas.getContext('2d');

const
  X = 100,
  Y = 100,
  A = 90,
  B = 50;

const
  N = 1000,
  SIDE = 4,
  HALF_SIDE = SIDE / 2;

const rand = (min, max) => Math.random() * (max - min) + min;

ctx.beginPath();
ctx.ellipse(X, Y, B, A, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();

for (let i = 0; i < N; i++) {
  const
    x = rand(-A + HALF_SIDE, A - HALF_SIDE),
    maxAbsY = (B - HALF_SIDE) / A * Math.sqrt(A * A - x * x),
    y = rand(-maxAbsY, maxAbsY);

  ctx.beginPath();
  ctx.rect(x + X - HALF_SIDE, y + Y - HALF_SIDE, SIDE, SIDE);
  ctx.stroke();
}

https://jsfiddle.net/rLcuy4ko/

this.update = () => {
  const
    w = this.w / 2,
    h = this.h / 2;

  this.x = Math.max(w, Math.min(W - w, this.x + this.dx));
  this.y = Math.max(h, Math.min(H - h, this.y + this.dy));
}

const { position: { x, y }, cell_radius, food_size, food } = this;
const isIntersects = item =>
  (item.x - x) ** 2 + (item.y - y) ** 2 <= (cell_radius + food_size) ** 2;

food.splice(0, food.length, ...food.filter(n => !isIntersects(n)));

// или

for (let i = food.length; i--;) {
  if (isIntersects(food[i])) {
    food.splice(i, 1);
  }
}

// или

let countEaten = 0;

for (let i = 0; i < food.length; i++) {
  food[i - countEaten] = food[i];
  countEaten += isIntersects(food[i]);
}

food.length -= countEaten;

Крутое у вас там условие в цикле: 1 < imageData.data.length. Может, всё-таки не 1, а i?

if(axis === "x")
    ctx.moveTo((position + x0), yMax);
    ctx.lineTo((position + x0), (y0 - dec));
    ctx.stroke();
if(axis === "y")
    ctx.moveTo(x0, (yMax - position));
    ctx.lineTo(xMax, (yMax - position));
    ctx.stroke();

JS вам не Python. Фигурные скобки где?

Координаты точек - случайные значения в интервале -/+ половина стороны куба.

https://codepen.io/anon/pen/ewYOjK?editors=0010

UPD. А ещё можно так сделать - одной из координат (выбирается случайным образом) присваиваем крайнее значение, тогда куб будет пустой внутри, все точки на гранях. Если зафиксировать две координаты - все точки на рёбрах.

canvas

Это чё, в setInterval запихнули подключение обработчика keydown? Умно. Не нужен тут никакой setInterval.

Сам обработчик keydown слишком сложно выглядит - зачем в четырёх разных местах делать один и тот же вызов функции? Сначала меняете координаты, а в самом конце - дёргаете перерисовку.

Размер картинок - а если решите поменять? Или опечатаетесь где-нибудь? Сделайте константу.

Что касается рисования, то наверное, проще всего будет замостить холст фоновым изображением, а потом рисовать персонажа.

Как это всё может выглядеть:

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const TILE_SIDE = 32;

let pickX = 0;
let pickY = 0;

const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image();
pick.src = 'Pick.png';

document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 87: pickY -= TILE_SIDE; break;
    case 65: pickX -= TILE_SIDE; break;
    case 83: pickY += TILE_SIDE; break;
    case 68: pickX += TILE_SIDE; break;

    default: return;
  }

  draw();
});

function draw() {
  for (let x = 0; x < canvas.width; x += TILE_SIDE) {
    for (let y = 0; y < canvas.height; y += TILE_SIDE) {
      ctx.drawImage(ground, x, y);
    }
  }

  ctx.drawImage(pick, pickX, pickY);
}

draw();

Так?

Всё работает. Просто вы сначала изменяете globalCompositeOperation, а затем рисуете картинку - естественно, что не видно ничего, всё становится прозрачным, рисовать текст после этого уже бессмысленно. Поменяйте порядок действий - сначала рисование картинки, затем изменение globalCompositeOperation. Как-то так.

Что не так ?

Да всё не так.

Что за clone? - у DOM-узлов такого метода нет. Есть cloneNode. Или используйте jquery (судя по тому, что контекст вы пытаетесь получить у clone[0], так и предполагалось), там clone есть: $(canvas).clone().

Копировать содержимое оригинала вы пытаетесь до того, как оно вообще будет загружено. Выполняйте копирование в onload.

Копируете непонятно откуда:

canvas = document.getElementById('myCanvas');
<...>
drawImage(canvas[0],

Опять же - либо canvas = $('#myCanvas'), либо drawImage(canvas,.

UPD. Должно было быть так?