67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
(function() {
|
|
|
|
'use strict';
|
|
|
|
let Canvas = function(container, width, height, scale) {
|
|
|
|
/* html element that the canvas will be created in */
|
|
this.container = container;
|
|
|
|
/* canvas width */
|
|
this.width = width;
|
|
|
|
/* canvas height */
|
|
this.height = height;
|
|
|
|
/* canvas scale */
|
|
this.scale = scale || 1;
|
|
|
|
/* container element - set properties */
|
|
container.style.width = (this.width * this.scale) + 'px';
|
|
container.style.height = (this.height * this.scale) + 'px';
|
|
|
|
/* canvas element - create and set properties */
|
|
this.canvas = document.createElement('canvas');
|
|
this.canvas.setAttribute('width', this.width * this.scale);
|
|
this.canvas.setAttribute('height', this.height * this.scale);
|
|
this.canvas.setAttribute('id', 'canvas');
|
|
|
|
/* insert in dom */
|
|
this.container.appendChild(this.canvas);
|
|
|
|
/* get drawing interface */
|
|
this.context = this.canvas.getContext("2d");
|
|
|
|
/* load images dynamically from all .png files present in '../assets/images'.
|
|
* this function implements a reducer that reduces all files loaded to a
|
|
* single object with the image filename name minus extension as key
|
|
* and the require()d file as value */
|
|
const requireImages = function (requireContext) {
|
|
return requireContext.keys().reduce(function(accumulator, filename) {
|
|
let framename = filename.match(/\.\/(\S+)\.png$/)[1];
|
|
accumulator[framename] = requireContext(filename);
|
|
return accumulator;
|
|
}, {});
|
|
};
|
|
this.images = requireImages(require.context('../assets/images', true, /\.png$/));
|
|
|
|
};
|
|
|
|
/* draw the image specified as argument on this canvas */
|
|
Canvas.prototype.drawImage = function(name) {
|
|
|
|
if (!(name in this.images)) {
|
|
throw new Error('image ' + name + ' unknown');
|
|
}
|
|
|
|
var image = new Image();
|
|
image.onload = () => {
|
|
this.context.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.canvas.width, this.canvas.height);
|
|
};
|
|
image.src = this.images[name];
|
|
|
|
};
|
|
|
|
module.exports = Canvas;
|
|
|
|
})(); |