All html canvas shapes are given the color of the last object added

by

It’s because you are never calling beginPath()!

function drawCircle(ctx,x,y,radius, color){
  var startAngle = 0;
  var endAngle = (Math.PI*2);
  var clockwise = true;
  ctx.fillStyle = color;
  ctx.beginPath(); // <-- Need me!!
  ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
  ctx.fill();
  ctx.closePath;
}

Since you don’t call beginPath, you are drawing one blue circle, then you are continuing a path that now has two circles (the old one and the new one), and drawing that path (and thus both circles) black!

Instead you want to draw one blue circle, fill it blue, begin a new path, and draw that one black.

Live code:

http://jsfiddle.net/5PDUb/1/

More Related Contents:

  1. Canvas width and height in HTML5
  2. Html5 canvas drawImage: how to apply antialiasing
  3. Drawing an SVG file on a HTML5 canvas
  4. How can I convert an HTML element to a canvas element?
  5. Drawing text to with @font-face does not work at the first time
  6. How to draw a rounded rectangle using HTML Canvas?
  7. What’s the best way to set a single pixel in an HTML5 canvas?
  8. How to change the opacity (alpha, transparency) of an element in a canvas element?
  9. How do I make a transparent canvas in html5?
  10. using HTML5 Canvas – rotate image about arbitrary point
  11. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  12. Can you take a “screenshot” of the page using Canvas?
  13. HTML5 Canvas getImageData and Same Origin Policy
  14. Animated GIF in HTML5 canvas
  15. Chart.js canvas resize
  16. HTML5 Canvas background image
  17. Placing a within a
  18. HTML5 Canvas slows down with each stroke and clear
  19. Combining two or more Canvas elements with some sort of blending
  20. What is the difference between SVG and HTML5 Canvas?
  21. How can I use custom fonts in an HTML5 Canvas element?
  22. Subpixel anti-aliased text on HTML5’s canvas element
  23. Draw SVG on HTML5 Canvas with support for font element
  24. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  25. How put percentage width into html canvas (no css)
  26. HTML5 Canvas and Line Width
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment