GithubHelp home page GithubHelp logo

maninandadeep / canvas-competition Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zense/canvas-competition

0.0 0.0 0.0 4.76 MB

Developed for Zense HacKnight 2K19

Home Page: http://canvas.zense.co.in

JavaScript 92.83% HTML 7.17%

canvas-competition's Introduction

Developed for Zense HacKnight 2K19

Authors

  • Satvik Ramaprasad
  • Shubhayu Das
  • Rohit Katlaa
  • Prajwal Agarwal
  • Jishnu Kumar

Instructions for users

  • You need not understand the code here to be able to use it.
  • Understanding the API below should be enough
  • See Examples to get started.

API Documentation

Helpful Canvas Variables

  • canvas.height: Height
  • canvas.width: Width
  • canvas.mouseX: Current Position of mouse x coordinate
  • canvas.mouseY: Current Position of mouse y coordinate
  • canvas.mouseDown: Boolean to check if mouse is pressed down
  • canvas.mouseDownX: Last Position of mouse press x coordinate
  • canvas.mouseDownY: Last Position of mouse press y coordinate
  • canvas.drawMode: Fill in a shape or just draw the border

Helpful Canvas Functions

  • canvas.setDrawMode(mode): Set the drawMode variable to "stroke" or "fill"
  • canvas.setColor(color): Set the color of the shape(s) to the given color. Default color is black(#000000)
    • Value can be any one of these types:
      1. "red"
      2. "#F54680"
      3. "rgb(100,100,100)"
      4. "rgba(100,100,101,0.3)"
  • canvas.setLineThickness(width): Set the thickness of the lines while in "fill draw mode". Default value is 1.
  • canvas.draw(): Draws the various shapes according to the drawing mode.
  • canvas.drawLine(x1, y1, x2, y2): Draws line from (x1, y1) to (x2, y2)
  • canvas.drawCircle(x, y, r): Draws circle with center (x, y) and radius r
  • canvas.drawRectangle(x, y, width, height): Draws rectangle with top left corner as (x, y) and of dimensions width * height
  • canvas.drawEllipse(x, y, a, b, angle, startAngle, endAngle): Draws an Ellipse with center(x,y) with major axis = a, minor axis = b at an angle theta given the startAngle And Endangle
  • canvas.clear(): Clears the canvas
  • canvas.isKeyDown(key): Checks if keyboard key is pressed. Example KeyA for A.
  • canvas.drawText(x, y, message, fontSize = 30): Draws at (x, y)
  • canvas.activateDoubleBuffer(): Call in setup to use double buffering in your program.
  • canvas.update(): Updates the screen with changes made on canvas(use only with double buffering)
  • canvas.drawImg(path,x,y,width,height): Draws an image at (x,y). "path" argument is used to mention the path of the image (width and height of the image are optional)

Optionally Override the following functions

  • canvas.mouseDownCallback(): Called when mouse is pressed
  • canvas.mouseUpCallback(): Called when mouse is released
  • canvas.mouseMoveCallback(): Called when mouse is moved
  • canvas.keyDownCallback(): Called when key is pressed
  • canvas.keyUpCallback(): Called when mouse is released
  • canvas.mainFunction(): Called after every timeStep

Note:(Regarding double buffering) Double buffering is entirely optional, you may not need it in your program. It is only required if you face flickering issues.

canvas-competition's People

Contributors

jishnuvk avatar prajwal7842 avatar rohitkatlaa avatar sal2701 avatar satu0king avatar shubhayu-das avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.