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