Hello,
I’m actually trying to implement a new plugin called DraWhatYouWant. It supposed to give you the ability to draw whatever you want into a draw area. It’s also possible to clear the area or change the color. The area is an HTML canvas and we can change or erase by clicking on buttons contaned into a div. However, that’s my first plugin and I cannot display the canvas and the button correctly in the test apps.
That’s my plugin’s configuration :
And my javascript code :
window.addEventListener("load", function(){
var clear = document.getElementById("clear");
var paint = false;
var color = "black";
var bbutton = document.getElementById("blue");
var rbutton = document.getElementById("red");
var gbutton = document.getElementById("green");
var blbutton = document.getElementById("black")
can = document.querySelector("canvas");
context = can.getContext("2d");
can.addEventListener("mouseup", finish);
can.addEventListener("mousemove", draw);
clear.addEventListener("click", clearContent);
can.addEventListener("mousedown", painting);
bbutton.addEventListener("click", blue);
rbutton.addEventListener("click", red);
gbutton.addEventListener("click", green);
blbutton.addEventListener("click", black);
can.height = 315;
can.width = 312;
function clearContent(){
context.clearRect(0, 0, can.width, can.height);
}
function painting(){
paint = true;
context.beginPath();
}
function finish(){
paint = false;
}
function draw(e){
if (!paint) return 0;
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
context.strokeStyle=color;
context.lineWidth = 5;
context.lineCap = "round";
context.lineTo(x, y);
context.stroke();
}
function blue() {
color = "blue";
}
function red() {
color = "red";
}
function green() {
color = "green";
}
function black(){
color = "black";
}
});
Notice that I haven’t yet write my js code into my plugin editor. So what I’m trying to do now is only to display my HTML code and for the moment what have is that :
So what I can do to display correctly my canvas and my range (which contain the buttons)
Any help would much appreciated.
Regards
YT
