We Keep Coding

Drawing on canvas in Bootstrap

So I have been having this problem with HTML5 canvas and Bootstrap. Esentially, I inserted a canvas inside a Bootstrap template (put it in an element with the class of "jumbotron"). And I want to be able to draw inside that canvas using my mouse. But, my mouse position and the editable-canvas area seem off. I took a snap-shot (hope I uploaded it correctly), the canvas is the pale-yellow thing with the purple border and the actual mouse position is the arrow I drew with blue, the blue dot is where the page sees the mouse position and begins drawing the line. Also, it won`t let me use the whole canvas area, I can only draw in the green square I outlined in the photo...
HTML code:
<div class="jumbotron">
<canvas id="draw" width="800" height="800"></canvas>
</div>
JS code to activate the drawing:
function draw(e) {
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
I also have to add that if I get the canvas into a new HTML (without Bootstrap), the code works perfectly (dot/line is following the mouse cursor fine). Also, if I delete the class "jumbotron", the mouse Position will be read correctly. I tried looking into the styles for "jumbotron", digged it up, tried using BoundingRect and others, but I could not figure this one out.
I am new here, so take me slow :) Many thanks in advance!

This happens because mouse position is relative to window. You must make some math to calculate coordinates relative to canvas. Some code for understanding
rect = canvas.getBoundingClientRect()
x = e.offsetX - rect.x
y = e.offsetY - rect.y
Then use x, y to draw something on canvas.
Also you can check my example where I draw with mouse without some additional calculations.
https://codepen.io/Profesor08/pen/aYJWRZ

HTML Canvas: rectangle stroke appears transparent

To be frankly honest with you, I've got no idea if this is my eye being a b*tch with me or the canvas actually going transparent. The issue seems to be perfectly clear to me however: when I use strokeRect (stroke Rectangle), the stroke appears to be transparent no matter what I do.
See screenshot of the stroke: http://prntscr.com/ijeiu9
See screenshot of a normal fill: http://prntscr.com/ijeiz7
My code is as simple as:
context.strokeStyle = "#F5F5F5";
context.strokeRect(128, 488, 400, 26);
This might even be default behaviour of what I may know, how can I 'fix' this?

MDN documentation describes this situation as follows:
Obtaining crisp lines requires understanding how paths are stroked. In
the images below, the grid represents the canvas coordinate grid. The
squares between gridlines are actual on-screen pixels. In the first
grid image below, a rectangle from (2,1) to (5,5) is filled. The
entire area between them (light red) falls on pixel boundaries, so the
resulting filled rectangle will have crisp edges.
If you consider a path from (3,1) to (3,5) with a line thickness of
1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on
either side of the path. An approximation of this has to be rendered,
which means that those pixels being only partially shaded, and results
in the entire area (the light blue and dark blue) being filled in with
a color only half as dark as the actual stroke color.
This means that to get a crisp line of width 1 you should start your rectangle from the half of a pixel:
let a = document.getElementById("a");
let ac = a.getContext("2d");
ac.strokeStyle = "#F5F5F5";
ac.lineWidth = 1;
ac.strokeRect(20, 20, 150, 100);
let b = document.getElementById("b");
let bc = b.getContext("2d");
bc.strokeStyle = "#F5F5F5";
bc.lineWidth = 1;
bc.strokeRect(20.5, 20.5, 150, 100);
canvas {width: 300px; height: 150px; background-color:black}
<canvas id="a"></canvas>
<canvas id="b"></canvas>

HTML5 Canvas event listening [duplicate]

I am new in canvas can anyone please help to short this issue.
I create 5 canvas circle. When I hover on any circle I need to change canvas color only, when hover on circle I added one class on canvas but is it possible to change only color. I don't want to create canvas again change only color when hover.
$(document).ready(function(){
$('.menuballs').hover(function () {
$(".menuballs").children('canvas').toggleClass('hover-intro');
if($(this).is(':hover'))
{
var c = document.getElementsByClassName("hover-intro");
var graphics = c.getContext( '2d' );
graphics.fillStyle = 'green';
graphics.fill();
}
});
});
Try this as taking hover-intro class but its given HTMLElement, and I need CanvasElement to fill in circle.

Your :hover will never be triggered.
Circles drawn on html canvas are not DOM elements. Instead they are like forgotten painted pixels on a canvas.
These are the steps to apply a hover-effect to your circle
Keep track of your circle's definition (x,y,radius,etc) in a javascript object.
Listen for mousemove events and test if the mouse is inside your circle
When the mouse enters or leaves your circle, redraw your circle
This is how those steps might look in code:
Demo: http://jsfiddle.net/m1erickson/rV9cZ/
Keep track of your circle's definition (x,y,radius,etc) in a javascript object.
var myCircle={
x:150,
y:150,
radius:25,
rr:25*25, // radius squared
hovercolor:"red",
blurcolor:"green",
isHovering:false
}
Listen for mousemove events and test if the mouse is inside your circle
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var dx=mouseX-myCircle.x;
var dy=mouseY-myCircle.y;
// math to test if mouse is inside circle
if(dx*dx+dy*dy<myCircle.rr){
// change to hovercolor if previously outside
if(!myCircle.isHovering){
myCircle.isHovering=true;
drawCircle(myCircle);
}
}else{
// change to blurcolor if previously inside
if(myCircle.isHovering){
myCircle.isHovering=false;
drawCircle(myCircle);
}
}
}
When the mouse enters or leaves your circle, redraw your circle
function drawCircle(circle){
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=circle.isHovering?circle.hovercolor:circle.blurcolor;
ctx.fill();
}

Not Understand how this Canvas Code Works

I'm playing around with Canvas Code. I wrote a function that draws out a path
function draw_faces() {
var canvas = document.getElementById("faces_bkgd");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var happy_face = new Path2D();
happy_face.rect(10,10,100,100);
ctx.fillStyle = "rgb(0,0,200)";
ctx.fill(happy_face);
happy_face.moveTo(50,50);
happy_face.lineTo(90,90);
happy_face.lineTo(90,50);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fill(happy_face);
ctx.save();
ctx.translate(50,50);
ctx.fillStyle="rgb(0,200,0)";
ctx.fill(happy_face);
ctx.restore();
}
fiddle demo
It gives me the following output at the top left of the page, there is a red square with a blue triangle in it. To the bottom of the red square, there is a overlapping green square with a triangle cutout.
Why is it a green square with a triangle cutout instead of a green square with a blue triangle in it?
Also, what do you guys use to debug Canvas on Web Inspector for Safari?

EDIT: I created some images explaining step by step what is happening. If you would like me to go into more detail please let me know. If there are certain parts you do not understand please let me know. If there are terms (methods, etc) that don't make sense let me know. Anything vague let me know. :)
Here are the important parts of you code with comments on what really is happening.
First part of your code draws a blue square with an instance of Path2D that you have defined as a rect.
var happy_face = new Path2D();
happy_face.rect(10, 10, 100, 100);
ctx.fillStyle = "rgb(0,0,200)";
ctx.fill(happy_face);
Then instead of creating a new instance of Path2D, you use your previous variable, happy_face, that is still defined as a rect and now you cut out a triangle and set the color to red and draw it.
//The moveTo and lineTo cut out a triangle in your square.
happy_face.moveTo(50, 50);
happy_face.lineTo(90, 90);
happy_face.lineTo(90, 50);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fill(happy_face);
Since you didn't move this square with a triangle cut out in it, you draw on top of your blue square. This gives the impression the triangle you cut out is blue, but that's just the old square underneath.
Going to ignore the save and restore methods since they don't do anything worthwhile. You then do a tanslate.. which just moves the pointer from where you start drawing from (0,0) to (50, 50). At ths point you change colors from red to green and you start drawing at (50, 50) happy_face ( the old square with a triangle cut out in it ).
ctx.save();
ctx.translate(50,50);
ctx.fillStyle="rgb(0,200,0)";
ctx.fill(happy_face);
ctx.restore();
Unfortunately you can't debut "canvas". Because when you draw something, you can't just move it. It's literally drawn on the canvas. If you draw a square on top of the other square, well the previous square is lost.

Identical calls to arc producing different sizes

I'm trying to figure out why drawing a shape, then drawing over it in a new color (as though to highlight it), and then re-drawing the original (un-highlighting it) is leaving traces of the highlighted color.
I've reproduced the issue in this fiddle. The wedge is drawn in a light-blue color. There's a red button that'll draw over it in red, then another button that re-draws the original shape. All parameters are identical (except for the color), but yet after clicking the button to reset the color, there's a faint trace of red over the wedge.
Before:
After:
Here's the relevant code:
drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");
$("#red").click(function () {
drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)");
});
$("#back").click(function () {
drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");
});
function d2r(degrees) {
return degrees * (Math.PI / 180.0);
}
function drawWedge(centerX, centerY, r, start, end, color) {
context.beginPath();
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, r, d2r(start), d2r(end), false);
context.closePath();
context.fillStyle = color;
context.fill();
}

This question was already answered, but I wanted to give a little more thorough explanation.
When you draw at a diagonal, your passing through "parts" of pixels (show in my example). So what does the browser do to the part of the pixel outside of the shape? It uses anti-aliasing (anti-aliasing is always on by default for browsers) to color the rest of the pixel (if you didnt have anti-aliasing the line would look jagged). If you notice, the faint trace of red is not a bright red because its getting blended due to anti-aliasing. And the reason you see it is because when you draw your shape on the canvas, the faint trace of red is not part of your shape, its part of the pixel on the outside of your shape.
Now as the answer mentioned, you can call clearRect to clear the canvas. However, you should read this SO question as it explains things in more detail (the selected answer is not as good as the second answer). Also, ever wonder why they call it a "canvas"? Think of an actual art canvas used by artists, once they paint on the canvas there is no way to take it off unless you get a new canvas or paint over it!

When drawing on canvas, it just keeps stacking things on top of each other until you clear it. The easiest way to clear it is ctx.clearRect(0,0,width,height)
I put that in your drawWedge function here:
http://jsfiddle.net/X7deh/1