"How is p5.js canvas related to html5 canvas?

tim50

I'm a noob. In P5.js we use strokeWeight instead of lineWidth. Since I'm a noob, I can do many things wrong. Can we use lineWidth in the P5 setup we have? Really I want to know (when I ask this question, people say they don't understand what I am asking), if we use the P5 library, can we still use the other code that we use with canvas, like lineWidth or getLinear Gradient?

Thanks

kfrajer

I don't see any entry for lineWidth() in the P5.js reference. Check this:http://p5js.org/reference/#/p5/strokeWeight

can we still use the other code that we use with canvas, like lineWidth or getLinear Gradient

It will be great if you can provide some code illustrating your approach.

Kf

tim50

When you are a noob, code is impossible. It is unbelievable confusing and hard. I started to learn canvas. I started to learn the syntax of canvas. Of course, it is impossible. After I learned a little bit like fillRect, then later, I found something new called, P5.js...... When I use P5.js, can I still use the stuff I learned before like fillRect?

There is no point for me to put examples here. I'll just screw it up and someone will point the screw up out. Can I use fillRect(0, 0, 100, 100)?

Please don't answer if you don't understand the question.

Thank you

mlandry

p5.js just add new functions on top of JS and the other libraries you might be using. As long as there's not a common keyword in both libraries you should be fine.

tim50

No other libraries. My god, no way. I just use canvas and js. You know in the body of html, I put canvas id "canvas" width= 500 height= 500 canvas... and then in the head I put: var ctx = document.getElementById("canvas").getContext("2d");

Now that stuff is probably wrong. So forget about that.

I have no idea what you mean by "add new functions on top of JS." Remember I am a noob. For noobs, this stuff is brutal hard.

How do I use fillRect(0, 0, 100, 100) or is it even possible? I know I can use rect(0, 0, 100, 100) but how do I use fillRect(0, 0, 100, 100)? Like I already learned stuff without P5. It will take me a month to right a function and another month to know where to put it so I need that information too.

tim50

Also, God I hope this makes sense, I use the CDN for P5. I put sketch.js in the head but if I put another js file in the head like main.js, it doesn't work. Does anybody know why that is? I was trying to use another js file to use the code I had learned before P5 like fillRect(0, 0, 100, 100).

mlandry

The rect() function in p5.js returns a "p5" object that doesn't have such functions. If you want to change the color you have to first call the fill() function then draw the rectangle using the rect() function. See the reference for examples : https://p5js.org/reference/#/p5/fill

jeremydouglass

@tim50 -- I think if I am understanding your question it might be a good idea for edit the title of this thread and change it to:

"How is p5.js canvas related to html5 canvas?"

...and you have questions like: "I learned how to do some things in html5 canvas -- can I do the same things in p5.js, and vice versa? Which things are the same or different, an why?"

Here are some starting points to learn more. Check out this excerpt from the p5.js overview -- https://github.com/processing/p5.js/wiki/p5.js-overview :

The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example below. See this reference for the native canvas API.

In general, the easy, simple thing for a beginner to do is just use p5.js, or just use html5 canvas. If you want to do both at once ("how can I bake my food in the oven while microwaving it at the same time?") things are going to get advanced. To interact with other parts of html5 through p5.js, here are some places to start:

From from the homepage -- https://p5js.org/ :

p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

Read "beyond the canvas" -- https://github.com/processing/p5.js/wiki/Beyond-the-canvas :

As you have seen, createCanvas creates an HTML5 Canvas, a special element you can draw graphics into. However, using the p5.dom add-on library, p5.js can also be used to create and interact with HTML elements outside of the graphics canvas. This tutorial will explain more about how to use p5.dom.

...and here is the reference for p5.dom:

• https://p5js.org/reference/#/libraries/p5.dom

GoToLoop

If you wish to directly manipulate the actual underlying HTMLElement from a p5.js' p5.Element: :>

1. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
2. https://p5js.org/reference/#/p5.Element

Access the latter's elt property: https://p5js.org/reference/#/p5.Element/elt *-:)

However I'd recommend you to stick w/ p5.js' API, for it's much easier: O:-)
http://p5js.org/reference/

tim50

Thanks everyone, your answers helped a lot. I like P5 because "the code train" videos are freakin awesome! So maybe I will just focus on P5 and check out some of your references.

Thanks again,