I'm bothered by existing space between one fill and another fill on HTML.
Each fill is fitting on their aslant side.
I'm expecting to fill exactly the line, but there is space.
this is sample code:
var canvas = document.createElement("canvas");
canvas.width = 120; canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, 120, 300);
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill();
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(120, 300); ctx.lineTo(0, 0); ctx.lineTo(120, 0); ctx.fill();
You can see the white line (white space) between black triangles.
Actually, the triangle's points are made by an auto-generating program for Flash,
and Flash can show the triangles without space but HTML5 can not.
Does anyone have an idea that erase that line?
You could add strokes to the triangles by adding this:
ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();
Example: http://jsfiddle.net/wxh4R/
// your Triangle
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill();
// Stoke
ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();
You might have to add 0.5 to some off you coordinates since a screen pixel is not at 0 but between 0 and 1. For more information see the "Ask Professor Markup" at http://diveintohtml5.ep.io/canvas.html#paths
Convert your drawings to Bitmaps.
Related
I have created circle in QML using canvas 2D. Half circle has light green color and another half sky blue but now i don't know how to set border color to this circle. anyone know how to set color to border of this circle??
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.reset();
var centreX =900;
var centreY = 150;
ctx.beginPath();
ctx.fillStyle = "#16AA55"; //green
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY,100, Math.PI * 0.01, Math.PI * 1, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#26A7CA";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, 100, Math.PI * 1, Math.PI * 2.01, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
}
You need the strokeStyle property to do this. Before drawing the shape onto the canvas set it to whatever color you want. More on this
Below is a snippet that draws two circles with different border colors.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
ctx.beginPath();
ctx.arc(210, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
Hope this helps :)
Try this please:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, Math.PI, 1.5 * Math.PI);
ctx.stroke();
// set this as the background color
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.arc(100, 75, 50, Math.PI, 2 * Math.PI);
ctx.stroke();
This will change the same half circle with different color.
want to draw rectangle using canvas html5 but this rectangle bent arch shape like in picture
use quadraticCurveTo(x,y,Bx,By);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 200);
context.quadraticCurveTo(400, 300, 600, 200);
context.quadraticCurveTo(500, 300, 600, 400);
context.quadraticCurveTo(400, 300, 200, 400);
context.quadraticCurveTo(300, 300, 200, 200);
context.closePath();
// line color
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'green';
context.fill();
http://codepen.io/hamed19/pen/QyXbNp
You can create a path with quadratic curves for everything except the left & right sides (lines):
Example code and a Demo:
Using styling to mimic the question's image
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
drawArchedRect(10,10,330,192,10,25,'lightgray','gray');
function drawArchedRect(x,y,w,h,offset,dipy,strokecolor,shadow){
ctx.translate(x,y);
ctx.beginPath();
ctx.moveTo(offset,0);
ctx.quadraticCurveTo(offset+w/2,dipy ,w-offset,0);
ctx.quadraticCurveTo(w,0, w,offset);
ctx.lineTo(w,h-offset);
ctx.quadraticCurveTo(w,h, w-offset,h);
ctx.quadraticCurveTo(offset+w/2,h-dipy ,offset,h);
ctx.quadraticCurveTo(0,h, 0,h-offset);
ctx.lineTo(0,offset);
ctx.quadraticCurveTo(0,0, offset,0);
ctx.save();
if(shadow){
ctx.clip();
ctx.shadowColor=shadow;
ctx.shadowBlur=5;
}
ctx.strokeStyle=strokecolor;
ctx.lineWidth=1.5;
ctx.stroke();
ctx.restore();
}
<canvas id="canvas" width=350 height=300></canvas>
I am using html5 and I want to draw a circle on top of a rectangle so I used the following html code:
<canvas id="myCanvas" style="z-index: 1;width:70%;height: 70%;float: left;">
<canvas id="c1" style="z-index: 2;width:10%;height: 10%;float: left;"></canvas>
and following js code:
$(document).ready(function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(10,10,$("#myCanvas").height(),$("#myCanvas").width());
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();
var canvas = document.getElementById('c1');
var context = canvas.getContext('2d');
var centerX = $("#myCanvas").height()/ 2;
var centerY = $("#myCanvas").width() / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
});
and here is the jfiddle link:
jfiddle
Now the problem is that the circle is not shown and I do not know what is the problem!!!
Can anyone help me?
Are you sure you need two canvases? I would do it on one.
$(document).ready(function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(10,10,$("#myCanvas").height(),$("#myCanvas").width());
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();
var centerX = $("#myCanvas").height()/ 2;
var centerY = $("#myCanvas").width() / 2;
var radius = 70;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#003300';
ctx.stroke();
});
http://jsfiddle.net/7FuL9/2/
Why do you need two canvas tags to do this? This can be done with just one canvas. Here is a JSBin that draws a circle on top of a rectangle.
I want to set the origin of my canvas in the bottom left corner like in a classic (O, x, y ) Cartesian landmark.
Transforming the canvas context is equivalent to changing the origin.
<canvas width="100" height="100" id="mycanvas"></canvas>
<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
ctx.transform(-1, 0, 0, 1, 100, 0);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,100);
ctx.closePath();
ctx.lineWidth = 5;
ctx.stroke();
</script>
Demo.
I have an arc with a blue outline and then a circle covering part of the arc using the global composite operator "destination-out", resulting in part of the arc being canceled out / cut off, but that leaves part of the new shape without an outline, is there any easy way to re-establish an outline to the shape?
Working example can be found here: http://jsfiddle.net/NY2up/
var ctx = document.getElementById("display").getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
live Demo
What I did was reset the globalComposition back to source-over and stroked a partial arc over the spot to give the effect.
ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
// reset the global comp and draw a partial arc with the proper radians.
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.arc(100, 100, 20, 1.61,-0.11, true);
ctx.stroke();
ctx.closePath();
I think you can draw the third arc to the canvas