We Keep Coding

HTML5 Canvas not clipping correctly?

I'm wondering if the following code yields appropriate behavior. I feel like the top left square should still be green. that is, if I clip one area, ten restore, then paint in a second area, the canvas paints in BOTH areas. Why?
https://jsfiddle.net/s6t8k3w3/
var my_canvas = document.getElementById('canvas');
var ctx = my_canvas.getContext("2d");
//Make Clipping Path 1
ctx.save();
ctx.rect(20, 20, 100, 100);
ctx.clip();
//Fill Background with Green
ctx.fillStyle = 'rgba(0,255,0,1)';
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height);
//Close Clipping Path 1
ctx.restore();
//Open Clipping Path 2
ctx.save();
ctx.rect(50, 50, 100, 100);
ctx.clip();
//Fill background with Blue
ctx.fillStyle = 'rgba(0,0,255,1)';
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height);
//Draw Line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();
//CloseClipping Path 2
ctx.restore();

You're not actually opening a second clipping path with that second ctx.save(); to do that, you need to call ctx.beginPath()

Custom diamond shape in html or jscript

I need is some way to draw a shape in html. I've tried searching around, but I haven't found anything related.
Here is a sketch of what I need.
I need to draw shape in red. I know how to draw the dots, but I don't know how to connect them, because the red dots can move. The blue dots mark where the red dots can go.

You could use a canvas. Here’s how you could draw a triangle:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
<canvas id="canvas" width="150" height="150">Your browser lacks canvas support.</canvas>
I’ll leave it to you to figure out how to draw a diamond and make it red.

Why is the HTML5 canvas not clearing in my code?

I am just getting started with Canvas programming and trying to build a small game. Below is a sample code that I am trying out. My intention is to:
Create a canvas.
Fill it with some background color.
Draw a circle.
Clear the canvas.
Draw another circle in different location.
Here's the code:
var canvas = document.createElement('canvas');
canvas.width= 400;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
// 2. Fill background
ctx.fillStyle = 'rgb(30,0,0)';
ctx.fillRect(0,0,400,400);
// 3. Draw circle
ctx.save();
ctx.fillStyle = 'rgba(256,30,30,.8)';
ctx.arc(50,50, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();
// 4. Clear Canvas
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
// 5. Draw another circle
ctx.save();
ctx.fillStyle = 'rgba(256,30,30,.8)';
ctx.arc(150,150, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();
But as you can see, only the background color gets cleared and the first circle remains as it is.
Why is the above code fails to clear the canvas completely before drawing second circle?

If you don't use beginPath before starting a new path, all draw command keeps stacking in the current path.
What's happening here is that when you fill() the second time, the first circle is still in the current path, so even if the screen was in deed cleared, there are two circles drawn with this single fill() command.
==>> use beginPath() before starting a new path.

FillText not working

I'm unable to get the text on the canvas. What am I doing wrong here ?
JSFiddle - http://jsfiddle.net/qHpt6/
var el = document.getElementById('mycanvas');
var context = el.getContext('2d');
context.globalAlpha = 0.95;
context.beginPath();
context.rect(0, 0, el.width, el.height);
context.fillStyle = "#435a6b";
context.fillText('Hello World',0,0);
context.fill();

You're trying to draw 40 point text into a little teeny box. Make the box bigger or the text a lot smaller.
You're also drawing the text at the upper left corner of the box. The text goes up from the baseline.
If you change the box size to something like 350 wide and 250 high, and change the code to
context.fillText("Hello World", 0, 200);
then you'll see the text.
Forked and fixed fiddle.

There is multiple issues:
The canvas is too small too correctly draw the text.
The text has the same fillStyle as the rectangle, so one cannot see it.
You draw the rectangle after the text, so the text is covered.
You may try this code:
context.globalAlpha = 0.95;
context.rect(0, 0, el.width, el.height);
context.fillStyle = "#435a6b";
context.fill();
context.font = 'italic 40pt Calibri';
context.fillStyle = "black";
context.fillText('Hello World',50,50);
http://jsfiddle.net/qHpt6/

Revealing portions of an image on mouseover

What is the best way to go about having a "fog of war" type thing where an image is blacked out, but then as the user mouses over the image an area around the cursor is revealed. So probably some layer styled with CSS over an image, that as the user mouses over it becomes transparent and so the image can be seen in an area around the mouse, but the rest of the image is still blacked out.

If you just want to use javascript and css to do this:
Create a black image with a transparent hole in the middle
Use some javascript to get the mouse position
Update the css to set the position of the fog image to the mouse pointer
You would have to make sure everything is layered correctly so that your image is under the fog image, and the fog image is under the rest of the content if this does not take up the entire browser window.

I found this to be a very nice question, so for future visitors I will leave this as a reference:
$(window).on('load', function () {
var
ctx = $('#canvas')[0].getContext('2d'),
mouse = {x: -100, y: -100};
// fill black
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// track mouse
$('#canvas').on('mousemove.fog', function (evt) {
mouse.x = evt.offsetX;
mouse.y = evt.offsetY;
});
(function animloop(now) {
var
frame = webkitRequestAnimationFrame(animloop), // use a polyfill here
x = mouse.x,
y = mouse.y,
r = 10,
grad = ctx.createRadialGradient(x, y, 0, x, y, r);
grad.addColorStop(0, "rgba(0, 0, 0, 255)");
grad.addColorStop(1, "rgba(0, 0, 0, 0)");
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = grad;
ctx.arc(x, y, r, 0, 2 * Math.PI, true);
ctx.fill();
}(Date.now()));
});​
demo: http://jsfiddle.net/RUc5s/1/

On canvas, you could make a layer over the image that is partly transparent but the area near the cursor will be fully transparent. Layers don't really exist on canvas, but there are frameworks that allow you to do layers.
on HTML/CSS, you could do "tiles" of the image that have 2 layers, an image below and a partly transparent PNG above. On hover, the PNG of the tile is set to display:none to reveal the image underneath.