We Keep Coding

Change browser background colour

Hope this is ok. Asked a similar question the other day but I wasn't as clear as I could have been so trying again!
I am trying to produce an elearning course where the browser background colour changes as the user moves through it. So far I can set the background to a solid colour eg:
document.body.style.background = "#7BC4CC";
If I then use the same code as above but replace the colour with a new colour, when the new JS is executed the colour changes but is very abrupt. I would like a short fade transition between the two
So, JS would start on one background colour, short fade, into new colour. Pretty sure it has to be JS due to limitations with the elearning software I am using.
thanks in advance!

You could set the transition property along with the background color to enable a smooth transition.
document.body.style.background = "#7BC4CC";
document.addEventListener('click', () => transitionTo('#edaf44'));
function transitionTo(color){
document.body.style.transition = 'background-color 300ms';
document.body.style.background = color;
}
<button>transition to other color</button>

Using canvas to layer animated and static content

I would like to have the fireworks from https://codepen.io/haidang/pen/WRGXJv overlaying the interactive table+button from https://codepen.io/kimaro/pen/BjqYeo.
I have tried using two canvases, where the canvas for the fireworks has
z-index=1
and the canvas for the table+button has
z-index=0
I tried changing the following in fireworks.js:
ctx.fillStyle = '#000'; //old
ctx.fillstyle = 'rgba(0,0,0,0)' //full transparent background
however the table+button canvas doesn't show for me. additionally, when changing the fillstyles for fillrect methods to be transparent, the background of the firework canvas changes colour randomly.
Additionally, if I call the firework js at the end of my html, then I can't click on the button of the canvas layer underneath.
Edit: As has been pointed out by Archer, the button would have to be on the top canvas layer. In this case, the background of the table+button layer would have to be transparent, whilst the layer underneath has the desired background colour.
Edit 2: A friend suggested I could merge the layers, to overcome the issue of the button being on the layer below.

How can I change a games background when controlled object runs into the border of canvas?

I'm somewhat new to coding. I currently have a code that creates a canvas for a controlled character to move around. So far I have it where if the character runs into the right border of the canvas, it will move the character to the left of the canvas. However I want to have the background change as well, showing the character has entered a new area. How would I go about doing this? The background is currently made with the use of CSS.

First you need to get your canvas into a variable. If it has an ID, you can use that:
var canvas = document.getElementById("YOUR_CANVAS_ID_HERE");
Then use this code to set the canvas' background color:
canvas.style.backgroundColor = "red";
That should be all you need!

How to download canvas with background image?

I have a canvas element that I'm setting the background on dynamically via code. Then I'm using the Sketch library (http://intridea.github.io/sketch.js/) to draw on the canvas. - This all works.
However, whenever I try to convert the canvas using canvas.toDataURL("image/png") it's able to save the canvas drawing, however isn't saving the background. - I understand this is working as designed.
Is there a way to merge the two? I was toying around with the idea that I could set the image src to the background src after I'm done drawing and try to export that, however I'm not certain. Does anyone have any experience with this?

As you've discovered, the canvas and its background are maintained separately and toDataURL will not also capture the background.
You can combine the background with the sketch using canvas compositing.
The 'destination-over' compositing mode will let you drawImage your background behind the sketches
context.globalCompositeOperation="destination-over";
context.drawImage(backgroundImage,0,0);
Now the background pixels have been drawn behind you sketch and both will be captured with toDataURL.

Yes, You are correct. I fetch the background image along with canvas image and download.
ctx.width = 2503;
ctx.height = 250;
ctx.globalCompositeOperation="destination-over";
var background = new Image();
background.src = "http://localhost/xxxxx/xxxxx/xxxxx/xxxxx/ecg_back.png";
ctx.drawImage(background, 0, 0);
// create pattern
var ptrn = ctx.createPattern(background, 'repeat'); // Create a pattern with this image, and set it to "repeat".
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, ctx.width, ctx.height);

How are you adding the background to the canvas? Are you setting it in css as a background image? Or are you adding the image directly to the canvas? I think you'll need to do the latter, as per the example here.

How to use a color picker for the canvas stroke color?

In my basic canvas painting tool I want the user to be able to change the color of the stroke by using a color picker. So I want the ctx.strokeStyle to change to whatever color the user picks on the color picker. I've managed to add the color picker to the canvas by using the input type="color" but I'm wondering how I can make the color of the stroke/brush in the canvas to change according to the color picked in the color picker.
So this is my canvas at the moment:
And I want the user to change the stroke color by using this:

Based on the picture you posted, looks like you want a solution like markE posted in his answer. Although, in the text you mention type="color". If you want to use this input you can check this jsfiddle working. In this second case, just remember a lot of browser do not support it yet. Click here if you want to see a list of browser that support it.
Below I will try to detail what changes I did to your jsfiddle.
Firstly, you need to set a callback to the color input. This mean when the value of the input changes, it calls the method change. The function change is getting the value of the input and set in a global variable called color.
var color = "rgb(255,0,0)";
function change(e){
color = this.value;
}
document.getElementById("color").onchange = change;
The other change was inside your draw function. Before the draw it is getting the value in the variable color. This way, the next time you change the color it will update the color used in the stroke.
ctx.strokeStyle = color;
With those changes, if in the future you decide to use another tool to get the color (for example, you can check the browser to see if it support the input="color" and use a different color picker in this case), you just need to set the new color in the variable color.

Here's a simple example of a color picker on a "tools" canvas used to set the current color (fill/stroke) on the drawing canvas:
Javascript paint Canvas, need help re-locating buttons?
For your "color wheel" picker, you would paint your wheel on the tools canvas and then use context.getImageData to grab the pixel color data under the mouse cursor.
var imgData=ctx.getImageData(mouseX,mouseY,1,1);
var data=imgData.data;
return("rgba("+data[0]+","+data[1]+","+data[2]+","+data[3]+")");
After the user picks their color on the tools canvas, you can use context.strokeStyle and context.fillStyle to make those colors active on the drawing canvas.

All you need to do is get the value of the color input and set the strokeStyle to that.
Live Demo
var points=new Array(),
colorInput = document.getElementById("color");
function start(e){
var mouseX = e.pageX - canvas.offsetLeft;
var mouseY = e.pageY - canvas.offsetTop;
paint = true;
ctx.beginPath();
ctx.moveTo(mouseX,mouseY);
points[points.length]=[mouseX,mouseY];
};
function draw(e){
if(paint){
var mouseX = e.pageX - canvas.offsetLeft;
var mouseY = e.pageY - canvas.offsetTop;
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
// set the value to the color input
ctx.strokeStyle = colorInput.value;
ctx.lineJoin = ctx.lineCap = 'round';
points[points.length]=[mouseX,mouseY];
}
}
function stop(e){
paint=false;
var s=JSON.stringify(points);
localStorage['lines']=s;
}
var paint=false;
var canvas = document.getElementById('myCanvas');
var ctx=canvas.getContext("2d");
canvas.addEventListener('mousedown',start);
canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mouseup',stop);