JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide" style="min-height:546px">
    <!-- main slider carousel items -->
    <div class="noImage" style="display: none;">
        <h1>No image to display...</h1>
    </div>
    <div id="imageContainer" class="carousel-inner">
        <div class="item filtered active" data-slide-number="0">
            <canvas id="img1" width="720" height="576"></canvas>
        </div>
    </div>
    <!-- main slider carousel nav controls -->
</div>

CSS

canvas {
	    cursor:crosshair;
}

JavaScript

$(function() {
            var zoomIntensity = 0.2;

            var canvas = document.getElementById('img1');
            var context = canvas.getContext('2d');
            // Create an image element
            var img = document.createElement('IMG');
            img.crossOrigin = "Anonymous";
            // When the image is loaded, draw it
            img.onload = function() {
                context.drawImage(img, 0, 0);
            }
            // Specify the src to load the image
            img.src = "http://19fxej1gn5pu1ihjs3344wqk.wpengine.netdna-cdn.com/wp-content/uploads/2012/09/jaguar-personalised-number-plate-the-car-expert.png";
            var width = 600;
            var height = 200;

            var scale = 1;
            var originx = 0;
            var originy = 0;
            var visibleWidth = width;
            var visibleHeight = height;


          //  setInterval(draw, 100);


            canvas.onmousewheel = function(event) {
                event.preventDefault();
                // Get mouse offset.
                var mousex = event.clientX - canvas.offsetLeft;
                var mousey = event.clientY - canvas.offsetTop;
                // Normalize wheel to +1 or -1.
                var wheel = event.wheelDelta / 120;
                // Compute zoom factor.
                var zoom = Math.exp(wheel * zoomIntensity);
                console.log(scale);
                context.translate(originx, originy);
                originx -= mousex / (scale * zoom) - mousex / scale;
                originy -= mousey / (scale * zoom) - mousey / scale;

                // Scale it (centered around the origin due to the trasnslate above).
                context.scale(zoom, zoom);
                // Offset the visible origin to it's proper position.
                context.translate(-originx, -originy);

                // Update scale and others.
                scale *= zoom;
                visibleWidth = width / scale;
               ...