Обработка изображений и отображение текстур с помощью HTML5 Canvas?

В 3D-движке, над которым я работаю, мне удалось нарисовать куб в 3D. Насколько я понимаю, единственный метод заливки сторон - это использовать сплошной цвет или градиент. Чтобы сделать вещи более захватывающими, я бы очень хотел реализовать наложение текстуры с помощью простого растрового изображения.

Дело в том, что я с трудом могу найти какие-либо статьи или образцы кода на тему манипулирования изображениями в JavaScript. Более того, поддержка изображений в холсте HTML5, похоже, ограничивается кадрированием.

Как я могу растянуть растровое изображение, чтобы прямоугольное растровое изображение могло заполнить нестандартную грань куба? В 2D проекция квадратной грани куба из-за перспективы не квадратной формы, поэтому мне придется растянуть его, чтобы подогнать под любой четырехугольник.

Надеюсь, это изображение проясняет мою точку зрения. Левая сторона теперь заполнена бело-черным градиентом. Как я могу заполнить его растровым изображением после того, как оно было наложено на текстуру?

Есть ли у кого-нибудь какие-нибудь советы по наложению перспективной текстуры (или вообще манипулированию изображениями) с использованием JavaScript и HTML5 Canvas?

Редактировать: У меня все заработало благодаря 6502!

Однако это довольно интенсивно использует процессор, поэтому я хотел бы услышать любые идеи по оптимизации.

Результат с использованием техники 6502 - Использовано изображение текстуры