logo
down
shadow

Javascript Canvas can't draw multiple curves


Javascript Canvas can't draw multiple curves

Content Index :

Javascript Canvas can't draw multiple curves
Tag : javascript , By : mlapida
Date : November 23 2020, 09:01 AM

This might help you The problem is that you use the variable i as your variable in the loop to draw all your curves. But, then inside getCurvePoints() you use the same variable i as a loop counter again. So, after the first curve has been drawn, i contains a value bigger than the number of curves you had. So, your loop to draw all three curves exits after the first one. To fix it, I changed your curve drawing loop variable to c, so it becomes:
for (var c = 0; c < curves.length; c++) {
        console.log(c);
        ctx.stroke();
        ctx.strokeStyle = colors[c];
        console.log(colors[c]);
        drawCurve(ctx, curves[c]);
        console.log(curves);
        console.log(curves.length);
        console.log(c);
 }
for (var i = 2; i < (_pts.length - 4); i += 2) {

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

how to draw arrow curves in svg or canvas…I saw many example but i m not getting idea how to draw


Tag : html , By : arcadian
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The arrows are markers in SVG that are typically paths that someone has created. I've been using the following for years, but there are others available.
You put the arrow pathis in the container in svg which hides the elements visually, but makes them available via the call marker-start or marker-end = "url(#mypathId)"
<svg width="200px" height="160px">
<defs id="arrowDefs">
<marker id="arrowEnd" fill="blue" stroke-linejoin="bevel" viewBox="0 0 8000 8000" refX="280" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto"><path id="arrowEndPath" stroke="rgb(0, 0, 0)" stroke-width="5" d="M 2 59 L 293 148 L 1 243 L 121 151 Z" /></marker>
<marker id="arrowStart" fill="red" stroke-linejoin="bevel" viewBox="0 0 8000 8000" refX="20" refY="140" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto"><path stroke="rgb(0, 0, 0)" stroke-width="5" transform="rotate(-8 -0.00363379 147.5)" d="M 4 147 L 299 60 L 159 148 L 299 251 Z" /></marker>
</defs>
  <path d="M30 80 Q 52.5 10, 95 80 T 180 80" stroke="black" stroke-width="2" marker-start="url(#arrowStart)"  marker-end="url(#arrowEnd)" fill="transparent"/>
</svg>

How to draw sharp curves and angled lines on Canvas in Android


Tag : android , By : Sandeep Arneja
Date : March 29 2020, 07:55 AM
this one helps. The image below shows the output on the Canvas. Curves and angled lines are not sharp like horizontal or vertical straight lines. I have android:hardwareAccelerated="true" and ANTI_ALIAS_FLAG on for Canvas as well. Please see the code below. How can I improve the quality of these curves (same as straight lines)? I am using a Nexus S. Is there a way to improve the resolution of Canvas. ,
Is there a way to improve the resolution of Canvas.

How to draw curves in circle in canvas using for loop?


Tag : javascript , By : apple
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , If you need a single curve to be repeated, then the simplest is to define it only once and instead of calculating yourself all the new points, just make your canvas move.
Think of your canvas as a moveable sheet of paper. You can use ctx.setTransform, ctx.rotate, ctx.translate etc. to "move" this canvas, while keeping your pen at the same position.
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

const angle = 0.1; // by which amount we rotate at each iteration

function draw() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const cx = window.innerWidth/2;
  const cy = window.innerHeight/2;
  const rad = Math.max(cx, cy) * 2;
  // controls the position of all the control points,
  // you might want to set each manually instead
  const binding = rad/Math.PI;
  let theta = 0;

  // we move our canvas so its center is now coordinates 0,0
  ctx.setTransform(1, 0, 0, 1, cx, cy);
  // a single path declaration
  ctx.beginPath();
  for( theta; theta < Math.PI*4; theta += angle ) {
    ctx.rotate(angle); // apply the rotation
    ctx.moveTo(0, 0); // current center
    // always the same parameters for the bezier curve
    ctx.bezierCurveTo(0, -binding, rad, -binding, rad, 0);
  }
  // even these can be part of the same single path
  for ( i=rad/8; i < rad; i += rad/8 ) {
    ctx.moveTo(i, 0); // to avoid the segment from center
    ctx.arc(0, 0, i, 0, 2 * Math.PI, false);
  }
  // a single stroke of the whole path
  ctx.stroke();
  
  // to reset the coordinate 0,0 at top left corner
  ctx.setTransform(1,0,0,1,0,0);
}

draw();
onresize = draw;
root,body { background: white; margin: 0 }
canvas { display: block; }
<canvas id="mycanvas"></canvas>

javascript canvas: draw moving average line with curves


Tag : javascript , By : yogan
Date : March 29 2020, 07:55 AM

Who to draw and fill two slightly offset curves with the Canvas API


Tag : html , By : CHeMoTaCTiC
Date : August 29 2020, 08:00 PM
hope this fix your issue Without code it is hard to know what you want or what you may be doing wrong. But filling the area between curves just needs the call to fill once you have defined the path.
Example
const ctx = canvas.getContext("2d");
const unit = (a, b, u) => (b - a) * u + a;
const p1 = {x:20, y:420}, p2 = {x:480, y:20}, p3 = {x:20, y:480};
ctx.beginPath()
ctx.moveTo(p1.x, p1.y);
ctx.bezierCurveTo(
    unit(p1.x, p2.x, 0.5), unit(p1.y, p2.y, 0.0),
    unit(p1.x, p2.x, 0.5), unit(p1.y, p2.y, 1.0),
    p2.x, p2.y
)
ctx.bezierCurveTo(
    unit(p2.x, p3.x, 0.5), unit(p2.y, p3.y, 0.0),
    unit(p2.x, p3.x, 0.5), unit(p2.y, p3.y, 1.0),
    p3.x, p3.y
)
ctx.lineWidth = 3;
ctx.lineJoin = "round";
ctx.strokeStyle = "#F80";
ctx.fillStyle = "#08F";
ctx.fill();
ctx.stroke();
<canvas id="canvas" width="500" height="500"></canvas>
Related Posts Related QUESTIONS :
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • Call function if variable does not exist in a filter
  • localStorage value doesn't get updated automatically
  • React not updating state with setState correctly inside promises
  • Direct native JavaScript or jQuery method to get containing block of an element
  • Dynamic JSON object to Html Table
  • How to send Id and file to same controller?
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com