Javascript 2d canvas collision?

I am currently making a simple game to try and better learn the language without frameworks or libraries. The collision systems always confuses me. For this game I need it to detect if either of the hazards collides with the player square. Also if you could explain the code for the collision detection I would appreciate it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dodge Game</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
        </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="1000"></canvas>  
    
        var canvas = document.getElementById("myCanvas");    //This variable will be use as a reference to the canvas object
        var ctx = canvas.getContext('2d');  //A variable to hold the value of the context

        var framesPerSecond = 60; //FPS

        const width = canvas.width; //Width of the canvas
        const height = canvas.height; //Height of the canvas    

        function createPlayer(){
            player = {
                x:400,
                y:600,
                //vx:5,
                w:25,
                h:25,
            }   
        }
        createPlayer();//Creates player once.


            hazard = {
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,
            }
            hazard2 ={
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,  
            }
        function createHazard(){
                 hazard = {
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,
            }
            hazard2 ={
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,  
            } 
        }
        setInterval(createHazard, 2000);

        function mouseMove(event){
        player.x = event.clientX - canvas.getBoundingClientRect().left - player.w / 2;
        if (player.x  width) player.x = width - player.w;
        }
        document.addEventListener("mousemove", mouseMove);

        function drawEverything(){
            ctx.fillStyle = 'red'; //Draws the red background every frame covering square
            ctx.fillRect(0, 0, width, height);

            ctx.fillStyle = 'black';
            ctx.fillRect(player.x, player.y, player.w, player.h); //Player

            ctx.fillStyle = 'white';
            ctx.fillRect(hazard.x, hazard.y, hazard.w, hazard.h); //Hazard

            ctx.fillStyle = 'white';
            ctx.fillRect(hazard2.x, hazard2.y, hazard2.w, hazard2.h); //Hazard 2

        }

        function movement(){
            hazard.y += hazard.vx;   
            hazard2.y += hazard2.vx; 


        }

        function update(){
            drawEverything();
            movement();
        }
        setInterval(update, 1000/ framesPerSecond)
    
</body>
</html>


Source: stackoverflow-javascript

Why doesn’t this javascript code for a basic canvas operation work?

Why does the following code not display a black box on the screen. It titles the page Chatroom so at least the beginning part works…

<html>
<head>
<title>Chatroom</title>
</head>
<body>
<canvas id=“chatroom” width=“240 height=“400”></canvas>

const canvas= document.getElementById('chatroom');
const context=canvas.getContext('2d');

context.fillStyle ='#000';
context.fillRect(0,0,canvas.width,canvas.height);

</body>
</html>

Thank you!


Source: stackoverflow-javascript

Live update of rgba using clientX/clientY?

The code below works until line 47 is replaced with line 48 (i.e. calculating the fillStyle). For some reason attempting to use clientY to calculate the blue portion of the rgba doesn’t work, whereas calculating the alpha is not a problem.

<!DOCTYPE html>
<html>

<head>
    <title> My Animation </title>
</head>

<body>
    <canvas id="myCanvas" height="768" width="1200"></canvas>
</body>

    var mainCanvas = document.getElementById("myCanvas");
    var ctx = mainCanvas.getContext('2d');
    var canvasWidth = mainCanvas.width;
    var canvasHeight = mainCanvas.height;
    // the array of squares
    var squares = [];

    var mouseX = 1200;
    var mouseY = 768;
    var putPoint = function (e) {
        // update mouse
        mouseX = e.clientX;
        mouseY = e.clientY;
    }
    mainCanvas.addEventListener("click", putPoint);

    for (i = 0; i 


Source: stackoverflow-javascript

HTML5 Video with Canvas transparency does not work in Safari

I’m trying to load a randomized video with alpha transparency using canvas on click, which is working in all browsers except Safari. For Safari, the audio is loading, however there is no video output. I tried removing the source tags as stated in https://www.experts-exchange.com/questions/28634434/HTML5-Video-Background-Not-Playing-on-Safari-or-IE11.html, however that did not seem to solve anything.

$(document).ready(function() {
	var outputCanvas = document.getElementById('outputSS'),
		output = outputCanvas.getContext('2d'),
		bufferCanvas = document.getElementById('bufferSS'),
		buffer = bufferCanvas.getContext('2d'),
		video = document.getElementById('videoSS'),
		width = outputCanvas.width,
		height = outputCanvas.height,
		interval;
				
		function processFrame() {
			buffer.drawImage(video, 0, 0);
			
			// this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
			var	image = buffer.getImageData(0, 0, width, height),
				imageData = image.data,
				alphaData = buffer.getImageData(0, height, width, height).data;

			
			for (var i = 3, len = imageData.length; i < len; i = i + 4) {
				imageData[i] = alphaData[i-1];
			}

			processFrame.crossOrigin = "anonymous";
			
			output.putImageData(image, 0, 0, 0, 0, width, height);
		}
		
		function randomColourVal() {
			return Math.floor( Math.random() * 2000 );
		}
		
		video.addEventListener('play', function() {
			clearInterval(interval);
			interval = setInterval(processFrame, 40)
		}, false);
			

	document.getElementById('buttonRedesign').onclick = function (){
		$( document ).ajaxSuccess(function( event, xhr, settings ) {
    		if ( settings.url.indexOf("/store/cart/mini_cart.jsp") >= 0) {
				var videos = [
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.ogv'}],  
				];
				var number = Math.floor(Math.random()*videos.length);
			    $('#videoSS').find('source').each(function(index){ 
			          videoSrc = videos[number][index].src;
			          $(this).attr('src', videoSrc);
			          document.getElementById('videoSS').load();
			          document.getElementById('videoSS').play();
			    });
		 	}
		});
	};
	$(function(){
	    var video = $('#videoSS')[0];
	    video.addEventListener('ended', function(){
	        $('.videoCont').fadeOut();
	        $('.replayVideo').show();
	    })
		video.addEventListener('playing', function(){
	        $('.videoCont').fadeIn();
	        $('.replayVideo').hide();        
	    })

	});

	$('.replayVideo').click(function() {
		document.getElementById('videoSS').play();
	});

});
.videoCont {position: fixed;margin-left: -390px;z-index: 1000;bottom: 0px;display:none;width: 400px;display: block;}
.replayVideo {position: fixed;margin-left: -260px;z-index: 1001;bottom: 0px;display:none;cursor:pointer;text-align: center;}
.replayVideo img {width: 2rem;}
.replayVideo div {background: rgba(255, 255, 255, .8);display: block;padding: 15px;margin-bottom: 40px;}
#outputSS {width: 300px;height: 327px;display: inline-block;}
#bufferSS {display: none;}
<button id="buttonRedesign">Add</button>
Replay Video
REPLAY


Source: stackoverflow-javascript