A dilemma I currently face involves creating a basic canvas and incorporating an <input type="color">. My goal is to change the color of a specific shape when the color value is changed. Take a look at my code below:
var colorRect = '#000';
var ball = document.getElementById("canvas");
var ctx = ball.getContext("2d");
var ctx1 = ball.getContext("2d");
ctx1.fillStyle = colorRect;
ctx1.fillRect(0,0,200,200);
ctx1.save();
//Left eye
ctx.fillStyle = '#fff';
ctx.fillRect(50,80,10,10);
//Right eye
ctx.fillStyle = '#fff';
ctx.fillRect(150,80,10,10);
//Nose
ctx.fillStyle = '#fff';
ctx.fillRect(100,110,10,20);
//Mouth
ctx.fillStyle = 'red';
ctx.fillRect(60,150,100,10);
$('#favcolor').on('change',function(){
colorRect = $(this).val();
ctx1.fillStyle = $(this).val();
ctx1.fillRect(0,0,200,200);
});
To see it in action, visit this link: http://jsbin.com/inewum/1. The issue I'm facing is that the updated style seems to override everything, causing the eyes and mouth to disappear. I simply want to update the style without losing those elements.