A simple shape tool


I’m trying to make a simple shape tool for a program. It works by adding a vertex to a shape when the mouse is clicked.

//array to hold points
var mousepoints = [];

function setup() {

function draw() {
    for(var i=0; i <mousepoints.length; i = i + 2){
    vertex(mousepoints[i], mousepoints[i+1]);


function mouseClicked(){

    append(mousepoints, mouseX);
    append(mousepoints, mouseY);    


function keyTyped(){

    //start a new shape

    if(key ==='a'){
    mousepoints.splice(0, mousepoints.length);

Screen Shot 2017-11-15 at 11.49.30 AM

The issue i’m facing is that when I make my shape with extrusions such as in the image, there is a fill outside the shape thats appearing(I have marked it in the red circles). Any way to resolve this?


  • Answer ✓

    Add between lines 11 and 12:

  • Thank you, doing this however erases the entire canvas when i want to start a new shape. I think I will have to draw the shape on a separate buffer and then merge it every time i want to start a new shape.

  • Yes, the entire canvas gets erased. That's good!

    You should not depend on what was previously drawn in one frame to draw the next frame.

    Make sure you have enough variables to remember all the things you want to draw, and redraw them all every frame.

Sign In or Register to comment.