0

The code below does not draw a circle and after one more stroke (when I press run from the HTML page), it paints the previous drawn function to red and still does not display the circle as intended.

I refered to this question and it still did not fix my problem.

var canvas = document.getElementById("mycanvas");
var c = canvas.getContext("2d");
var c1 = canvas.getContext("2d");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();

function crtanjeGrede(l)
{
  var oslonac1 = parseInt(l) + 30;

  c.beginPath();
  c.fillRect(30, 30, l, 5);

  c.beginPath();
  c.moveTo(oslonac1, 35);
  c.lineTo(oslonac1 + 25, 45);
  c.lineTo(oslonac1 - 25, 45);
  c.lineTo(oslonac1, 35);
  c.moveTo(oslonac1 + 25, 50);
  c.lineTo(oslonac1 - 25, 50);
  c.stroke();
 
  c.beginPath();
  c.moveTo(30, 35);
  c.stroke();
  c.lineTo(55, 45);
  c.stroke();
  c.lineTo(5, 45);
  c.stroke();
  c.lineTo(30, 35);
  c.stroke();
 
  c.moveTo(30, 55);
  c.lineTo(30, 400);
  c.moveTo(oslonac1, 55);
  c.lineTo(oslonac1, 400);
  c.closePath();
  c.stroke();
}

function crtanjeGerbera1(q){
  var gerber1 = parseInt(q) + 30;
  c1.beginPath();
  c1.arc(q, 32, 44, 0, 2 * Math.PI); // length is inserted by user (variable q) and
  // the starting point Y has to be directly on rectangle (has to be lined over the
  // previous maded rectangle, that's why I wrote 32)
  c1.fillStyle = 'red';
  c1.fill();
  c1.lineWidth = 1;
  c1.strokeStyle = 'red';
  c1.stroke();
  c1.closePath();
}

crtanjeGrede(duzina);
crtanjeGerbera1();
James
  • 6,911
  • 9
  • 40
  • 80
Nikola Deljanin
  • 11
  • 2
  • `duzina` is undefined. When you press run? Are we supposed to imagine what that looks like without code? I don't even see a `CanvasRenderingContext2DInstance.arc`. – StackSlave Dec 20 '19 at 00:12
  • You are not passing the required `q` parameter for `crtanjeGerbera1`. You need to set the `fillStyle` and `strokeStyle` in `crtanjeGrede`. Also, you are calling a bunch of `stroke()` while building your subpath this will stroke the beginning as many times, resulting in poor antialiasing artifacts. Call it once after you are done with the path declaration. And to clear the canvas between each call: https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing – Kaiido Dec 20 '19 at 00:26
  • @StackSlave it is defined var duzina = $("#Duzina").val(); and it pulls it from html code. I thought you could answer just from this much code cause the code is too long – Nikola Deljanin Dec 20 '19 at 01:02
  • @Kaiido yes. You were right. Works now! Thank you very much!!! I can't find option to mark your question as "the right one" and i guess i still don't have enough reputation to do so.. So just edit on the last line crtanjeGerbera1(q); and it works. Thanks for the canvas as well. I will clear all those strokes. Cheers! – Nikola Deljanin Dec 20 '19 at 01:06
  • I did post it only as a comment, not as an answer that's why you can't accept it. To be honest I also did vote to close your question as "Typo". This kind of question is caused by problems that arise every day to every programmer, but having an Q/A about it in stack-overflow won't help any future reader: the odds someone else that faces the same issue will be able to find *this* question, are infinitesimally small. The best IMO, would be to delete it. – Kaiido Dec 20 '19 at 01:16
  • Glad you figured it out. There's usually no point to `.closePath()` after a `.stroke()` by the way. `.closePath()` is the same as `.moveTo(beginX, beginY)`. You would `.closePath()` to avoid rewriting your first `.moveTo()` that came after your `.beginPath()`. – StackSlave Dec 20 '19 at 01:36

0 Answers0