paint app in canvas
Question
I am working on a project on canvas in Html in which I have to :
- let the user draw a circle by dragging the mouse and it should be colorless.
- and fill circle color from a list of choices but that should be done after creating a circle.
and now i able to make empty circles(no colors in them) in canvas but there are many faults in this: Lets skip the drag and drop part for now
issues:
- I am only able to make circle when I move my mouse left to right, if I try to create a circle in top-bottom or vice versa ir another positon nothing happens
- I am able to create an empty circle but unable to fill colors and if I am creating a circle and move the mouse up back to the starting point without releasing it,it creates like multiple circle inside of each other.
I am not able to think of anything. I am putting my entire code. hope someone can help me out:-
<head>
<title></title>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery.color.js"></script>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery-1.11.1.min.js"></script>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery.easing.1.3.js"></script>
<script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery-ui.js"></script>
<style type="text/css">
.clrPicker
{
width: 30px;
height: 30px;
border: 1px solid #808080;
margin-bottom: 5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="tr0">
<div class="td">
Select Drawing tool : <br />
<!--<input type="radio" name="dTool" id="dToolR" value="Rectangle" /> <label for="dToolR">Rectangle</label>-->
<input type="radio" name="dTool" id="dToolC" value="Circle" /> <label for="dToolC" onclick="DrawCircle()">Circle</label>
</div>
</div>
<div id="board" style="width: 930px;">
<div>
<canvas id="kfCanvas" width="800px" height="500px;" style="border: 3px dotted #000;cursor:crosshair;">
Sorry, your browser doesn't support canvas technology.
</canvas>
<div style="float: right;">
<div>
Color picker:
<div class="clrPicker" style="background-color:black;" onclick="SetBrushColor('black')"></div>
<div class="clrPicker" style="background-color:red;" onclick="SetBrushColor('red')"></div>
<div class="clrPicker" style="background-color:blue;" onclick="SetBrushColor('blue')"></div>
<div class="clrPicker" style="background-color:green;" onclick="SetBrushColor('green')"></div>
<div class="clrPicker" style="background-color:orange;" onclick="SetBrushColor('orange')"></div>
<div class="clrPicker" style="background-color:yellow;" onclick="SetBrushColor('yellow')"></div>
</div>
</div>
</div>
<script>
var curColor = 'black';
var context;
var startX, startY;
var canvasX, canvasY;
var width, height;
var toolSelected;
var kfCanvas = document.getElementById("kfCanvas"); // jQuery doesn't work as .getContext throw error
if (kfCanvas) {
var isDown = false;
ctx = kfCanvas.getContext("2d");
DrawAWhiteBase(); // Draw a white base on the canvas
$(kfCanvas).mousedown(function (e) {
isDown = true;
startX = e.pageX - kfCanvas.offsetLeft;
startY = e.pageY - kfCanvas.offsetTop;
toolSelected = $("input[type='radio'][name='dTool']:checked");
}).mousemove(function (e) {
if (isDown != false) {
canvasX = e.pageX - kfCanvas.offsetLeft;
canvasY = e.pageY - kfCanvas.offsetTop;
width = Math.abs(canvasX - startX);
height = Math.abs(canvasY - startY);
var beginrad = startX;
var endrad = canvasX;
var radius = endrad - beginrad; //to calculate circle radius
var toolSelected = $("input[type='radio'][name='dTool']:checked");
//if (toolSelected.length > 0)
//{
//toolSelected = toolSelected.val();
//if (toolSelected == 'Circle')
//{
DrawCircle(startX, startY, radius);
//}
//}
}
}).mouseup(function (e) {
isDown = false;
ctx.closePath();
});
}
//DrawAWhiteBase is for teh canvas background
function DrawAWhiteBase() {
ctx.beginPath();
ctx.fillStyle = "white";
ctx.fillRect(0, 0, kfCanvas.width, kfCanvas.height);
ctx.closePath();
}
function DrawCircle(x, y, r) {
ctx.beginPath();
//ctx.fillStyle = curColor;
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
}
//function SetBrushColor(c) {
// //if (c == 'Text') {
// // c = $("#clrText").val();
// //}
//curColor = c;
//$("#divSelectedColor").css('background-color', curColor);
//ctx.fill();
//}
</script>
</div>
</body>
1 answers
solution1
0 2015-02-26 07:08:18
Here's one way to draw a circle by dragging:
- mousedown declares the centerpoint of the circle and starts the drag.
- mousemove sets the temporary circle radius (==distance from mouse to centerpoint) and draws the unfilled circle.
- mouseup sets the circle radius and draws the filled circle.
Example code and a Demo:
var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var $canvas=$("#canvas"); var canvasOffset=$canvas.offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var scrollX=$canvas.scrollLeft(); var scrollY=$canvas.scrollTop(); var isDown=false; var cx,cy,mx,my; var PI2=Math.PI*2; var fill='red'; ctx.lineWidth=3; ctx.strokeStyle='gray'; $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUpOut(e);}); // change fill color $('input[type=radio][name=group1').change(function(){ fill=this.value; }); function draw(cx,cy,mx,my,fill){ var dx=mx-cx; var dy=my-cy; var radius=Math.sqrt(dx*dx+dy*dy) ctx.clearRect(0,0,cw,ch); ctx.beginPath(); ctx.arc(cx,cy,radius,0,PI2); ctx.closePath(); if(fill){ ctx.fillStyle=fill; ctx.fill(); } ctx.stroke(); if(!fill){ ctx.beginPath(); ctx.arc(cx,cy,3,0,PI2); ctx.closePath(); ctx.fillStyle='black'; ctx.fill(); } } function handleMouseDown(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); cx=parseInt(e.clientX-offsetX); cy=parseInt(e.clientY-offsetY); // Put your mousedown stuff here isDown=true; } function handleMouseUpOut(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mx=parseInt(e.clientX-offsetX); my=parseInt(e.clientY-offsetY); // Put your mouseup stuff here isDown=false; draw(cx,cy,mx,my,fill); } function handleMouseMove(e){ if(!isDown){return;} // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mx=parseInt(e.clientX-offsetX); my=parseInt(e.clientY-offsetY); draw(cx,cy,mx,my); }
body{ background-color: ivory; } #canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Drag to draw circle (Circle expands from center).</h4> <input type=radio name=group1 value='red' checked>Red <input type=radio name=group1 value='gold'>Gold <br><canvas id="canvas" width=300 height=300></canvas>
And if you also want to display previous circles:
- save each circle in a JS object:
var newCircle={cx:10,cy:10,radius:10,fill:'gold'} - add each circle-object to an array:
var circles=[]; circles.push(newCircle);var circles=[]; circles.push(newCircle); - and iterate through the array and redraw every previous circle in
draw()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Paint app with canvas
Adding Text Tool to Paint App HTML5 Canvas
Drawing to canvas like in paint
Paint canvas undo feature
How to “paint” on an image on Canvas?
Javascript paint canvas
Paint canvas not working properly
functions deleting the paint canvas
Trying to save a canvas with a paint script
Draw a (progressive) paint splash on a canvas
Related Tags