JSFiddle - React, Tailwind, and code Playground

by luckylooke

HTML

<section id="main">
			
        <canvas id="myDrawing" width="770" height="400" style="border: 1px solid red;">
            <p>Your browser doesn't support canvas.</p>
        </canvas>		
			<input type="text" name="sliderVal" id="sliderValue" value="0" /><br /><br />
			
			<div id="slider"></div>
      <div>
        
        <button style="margin-top: 1px;"></button>
      </div>
			
		</section>
		
        <footer>
	        
        </footer>

JavaScript

$(function(){
	
	var currentValue = $('#currentValue');
	

   $( "#slider" ).slider({
        range: "max",
    	min: -100,
    	max: 100,
    	value: 0,
    	slide: function( event, ui ) {
    		$( "#sliderValue" ).val( ui.value );
    		$(ui.value).val($('#sliderValue').val());
    		changeIt(ui.value);
    	}
    	});
	
	$("#sliderValue").change(function() {
    $("#slider").slider("value" , $(this).val())
	});
	
});

 var x; //drawing context
var width;
var height;
var fg;
var buffer

window.onload = function() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        x = drawingCanvas.getContext('2d');
        width = x.canvas.width;
        height = x.canvas.height;
        
x.fillRect(20, 20, 150, 100);

/*         fg = new Image();
        fg.src = 'http://icons.iconarchive.com/icons/iconshow/transport/256/Sportscar-car-icon.png';
        
        // to tint the image, draw it first
        x.drawImage(fg,0,0); */

    }
}

    function changeIt(value) {
	
 
        // create offscreen buffer, 
        buffer = document.createElement('canvas');
        buffer.width = fg.width;
        buffer.height = fg.height;
        bx = buffer.getContext('2d');

        // fill offscreen buffer with the tint color
        bx.fillStyle = 'rgb(' + value + ', 0, ' + (255 - value) + ')';
        bx.fillRect(0,0,buffer.width,buffer.height);

        // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
        bx.globalCompositeOperation = "destination-atop";
        bx.drawImage(fg,0,0);
        
                //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
        x.globalAlpha = 0.5;
        x.drawImage(buffer,0,0);

    }