JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="dummy-wrapper">
<canvas id="dummy-canvas" width="250" height="250" data-src="images/[RATIO]/[SCREEN].png"></canvas>
</div>
</body>
CSS
/* Removes Mobile Highlight */ *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
canvas {
background-color: red;
}
}
JavaScript
var Code = Code || {};
Code.Image = (function() {
var _cache = {
'wrapper' : null,
'canvas' : null,
'ctx' : null,
'img' : new Image(),
'query' : null
},
_config = {
'canvasWidth' : null,
'canvasHeight' : null,
'origImgWidth' : null,
'origImgHeight' : null,
'imgHeightRatio' : null,
'imgWidthRatio' : null,
'newImgWidth' : null,
'newImgHeight' : null,
'smoothingEnabled' : false,
'screen' : {
'requested' : null,
'current' : null
}
},
_init = function _init() {
_setupCache();
_setupCanvas();
_setupRequest();
_setupImage();
},
_setupRequest = function _setupRequest() {
_cache.query = _parseQuery(window.location.href);
_config.screen.requested = _cache.query.screen;
},
_setupCache = function _setupCache() {
_cache.wrapper = document.getElementById('dummy-wrapper');
_cache.canvas = document.getElementById('dummy-canvas');
_cache.ctx = _cache.canvas.getContext('2d');
},
_setupCanvas = function _setupCanvas() {
if (_config.canvasWidth == null)
_config.canvasWidth = document.documentElement.clientWidth;
if (_config.canvasHeight == null)
_config.canvasHeight = document.documentElement.clientHeight;
_cache.canvas.width = _config.canvasWidth;
_cache.canvas.height = _config.canvasHeight;
_cache.ctx.mozImageSmoothingEnabled = _config.smoothingEnabled;
_cache.ctx.webkitImageSmoothingEnabled = _config.smoothingEnabled;
_cache.ctx.imageSmoothingEnabled = _config.smoothingEnabled;
},
_setupImage = function _setupImage() {
_cache.img.onload = function() {
_adjustImageScale();
_assignEvents();
};
_cache.img.src = _generatePath(_cache.canvas.getAttribute('data-src'));
_config.screen.current = '';
},
_generatePath = function _generatePath(path) {
return "http://www.ilikewallpaper.net/iphone-5-wallpapers/download/5108/Rainbow-Swirl-iphone-5-wallpaper-ilikewallpaper_com.jpg?"; // hack for...