Canvas clears

User wants to clear the canvas:

    As a: user;
    I want: a way to clear the canvas;
    so that: I can draw something else.

    Given: user wants to clear the canvas;
    When: user selects the `Clear` button;
    Then: the the canvas resorts to default of being empty.

Save canvas state for later

User should be able to save progress:

    As a: user;
    I want: to press a button;
    so that: I can save my progress for later.

  User can save their progress so that:

    Given: there is a save button;
    When: user clicks on `Save`;
    Then: their progress is saved for later.

User can select  from various brush sizes.

There should be a brush size selection component so:

    As a: user ;
    I want: to be able to select a brush size;
    so that: brush strokes can vary.

    Given: the default brush size is 1px;
    When: user selects another brush size;
    Then: brush will retain that size until user selects another size.

User should be able to upload their image so social media:

    As a: user;
    I want: share my image;
    so that: people can see how bad I draw.

  User clicks on share :

    Given: user wants to share their current canvas as an image;
    When: user clicks on `Share`;
    Then: an options of social media sites appear so they can share their image.

Draw enclosed paths by clicking multiple points

User should be able to draw an enclosed path after clicking multiple points:

    As a: user;
    I want: draw and image with enclosed paths;
    so that: I may fill its color in later.

  User can draw enclosed paths by clicking multiple points:

    Given: user selects brush size and color and clicks multiple points ;
    When: user closes the path;
    Then: the closed path will be one segment.

Canvas Loads on page load

When user loads page the HTML canvas should be visible.

    As a: user;
    I want: to see the html canvas;
    so that: I can draw on the canvas.

  A description of each specific scenario of the narrative with the following structure:

    Given: user goes to Creanvas home page;
    When: the the home page loads;
    Then: the user sees the html canvas.

Save image

User should be able to save progress as image:

    As a: user;
    I want: to press a button;
    so that: I can save my progress as an image.

  User can save their progress so that:

    Given: there is a save button;
    When: user clicks on `Save`;
    Then: their progress downloads as an image.

User should be able to upload an image that gets converted to black/white lines:

    As a: user;
    I want: upload my own image;
    so that: I can trace/color the image.

  User uploads image so that :

    Given: user drags/drops images to canvas;
    When: user drops image into canvas;
    Then: image is converted to black/white.

Draw straight lines using shift key

User should be able to draw straight lines using the mouse and shift key:

    As a: user;
    I want: to draw draw a straight line;
    so that: lines are not messy.

  User can draw straight lines using the shift key:

    Given: user selects brush size and color and holds down the shift key ;
    When: user moves mouse around canvas while shift key held down;
    Then: brush stokes will be straight.

User can select  from various colors.

There should be a color selection component so:

    As a: user ;
    I want: to be able to select a brush color;
    so that: I can make colorful images.

    Given: the default brush color is black;
    When: user selects another color;
    Then: brush will retain that color until user selects another color.

Restore canvas state

User should be able to restore progress:

    As a: user;
    I want: to press a button;
    so that: I can restore my progress.

  User can restore their progress so that:

    Given: there is a restore option;
    When: user clicks on `Restore/Upload`;
    Then: their progress is restored to canvas.

Draw images freehand

User should be able to draw freehand:

    As a: user;
    I want: to draw using a mouse or my finger;
    so that: lines are not completely straight.

  User can draw with a mouse or finger

    Given: user selects brush size and color, ;
    When: user moves mouse or finger around canvas;
    Then: brush stokes will be visible.

User should be able to upload their image so social media:

    As a: user;
    I want: share my image;
    so that: people can see how bad I draw.

  Two users can user canvas at the same time :

    Given: user decides to battle another user;
    When: two users are on the same canvas instance;
    Then: after a certain period of time one is considered the winner.