#HTML5 Canvas | Explore Tumblr Posts and Blogs

mt505-gaming · 1 year

Text

youtube

#fighting games #gamedev #gaming #javascript #html5 #html5 canvas #video games #video tutorial #Youtube

8 notes · View notes

whojustfatposted · 1 month

Text

Crozec Sprite (HTML5)

One of the smoothest sprites I had made, and this is assembled, too. That's right, this is a fully riggable sprite! Anyways the one thing I am still trying to address is removing the anti-alias from the arm's paths. It is really ruining the overall visual of the sprite. OC Reference Page

#oc #oc art #art #animation #sprite #html5 canvas #gif #gif animation #animated gif #animated

0 notes

werewolf-kat · 2 months

Text

Been really digging Frank's Laboratory on Youtube for JavaScript + Canvas tutorials since coming across him this past week. He keeps everything clear and shows patience for beginners. It's really been keeping me motivated to learn game dev in JS too! My dream...

#he goes through each thing and intentionally puts in mistakes to show how to troubleshoot them too!#super valuable to learn troubleshooting code and knowing what to look for 👍#also you guys GOTTA see his insane Canvas particle effects and animations PLEASE GO LOOK #regardless if you understand the code behind it it's mesmerizing!!#wk speaks #programming #javascript #web development #html5 canvas #game development #I've made a few simple games the last few months from other channels too #I love Youtube for learning these things 'cause I do best with step-by-step demonstrations I can follow #some don't explain things super well though so I don't get to fully understand what I followed #I gotta try my hand at tic-tac-toe again where I can understand the mechanisms of mapping its varied win/lose conditions #my first time doing it there was some binary code manipulation that lost me so much sdfsdf #I'm not THAT advanced yet oh gosh

0 notes

webtutorsblog · 1 year

Text

Some Advanced HTML Tags and Techniques: Take Your Web Design Skills to the Next Level

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It allows you to structure content and define its meaning, layout, and appearance on a web page. Here are some advanced HTML tags and techniques that can help you create more dynamic and interactive web pages.

HTML Head

The HTML head element contains information about the document, such as the page title, meta information, and links to external resources. The head element is included in the HTML file before the body element and is not visible on the page. It is used to provide information that the browser or search engine can use to better understand and display the document. Some common elements found in the head include the title tag, meta tags for SEO, links to stylesheets, and references to JavaScript files. By including the appropriate information in the head element, you can help to improve the user experience and search engine optimization of your web pages.

Learn More About HTML Head

HTML Color

HTML color is an important aspect of web design, and learning to use color codes effectively can enhance the visual appeal of a web page or website. HTML color codes can be used with various HTML elements, such as <body>, <div>, <h1>, <p>, and <a>, to name a few. They can also be used in CSS code to style elements within a page or an entire website.

Learn More About HTML Color

Semantic HTML

Semantic HTML uses tags to describe the meaning and structure of content, rather than just its appearance. This makes it easier for search engines and screen readers to understand the content of a web page. Examples of semantic tags include <header>, <main>, <nav>, <section>, and <article>.

Learn more about HTML Semantic

Custom Attributes

HTML allows you to create your own custom attributes for elements. This can be useful for storing additional data or metadata about an element, such as a data attribute for storing an ID or a tooltip. Custom attributes should be prefixed with "data-", such as data-id or data-tooltip.

Learn more about HTML Attributes

HTML Forms

HTML forms are used to collect user input and are a fundamental component of many web applications. Advanced form techniques include validation, using the required attribute, and customizing the appearance with CSS.

Learn more about HTML Forms

HTML5 Canvas

The HTML5 canvas elementallows you to create dynamic graphics and animations on a web page. With JavaScript, you can draw shapes, lines, text, and images, and animate them using various techniques.

Learn more about HTML Canvas

Responsive Images

Responsive images ensure that images are displayed at an appropriate size and resolution for the user's device and connection speed. HTML provides several ways to implement responsive images, including the srcset and sizes attributes, and the picture element.

Learn more about HTML Images

HTML Table

HTML tables are used to display data in a structured and organized manner. They consist of rows and columns, and each cell can contain text, images, links, or other HTML elements. To create a table, you use the <table> tag, and then add rows with the <tr> tag and cells with the <td> or <th> tag. The <th> tag is used for table headers. You can also add attributes such as "border", "cellspacing", and "cellpadding" to the <table> tag to adjust the appearance of the table. By using HTML tables, you can present data in a clear and readable format on your web page.

Learn more about HTML Table

HTML Class

HTML classes allow you to apply a specific style or behavior to a group of HTML elements. To create a class, you use the "class" attribute and assign a name to it, such as "my-class". You can then add this class to one or more HTML elements by using the "class" attribute followed by the class name, such as "class=my-class". This makes it easier to apply consistent styles across your website and to make changes to those styles by editing the class definition in your CSS stylesheet. Classes can also be used to target elements with JavaScript or jQuery, making it easier to manipulate their behavior and appearance. By using HTML classes, you can create a more flexible and maintainable website design.

Learn more about HTML Class

HTML JavaScript

HTML and JavaScript work together to create dynamic and interactive web pages. JavaScript is a programming language that can be embedded in HTML documents to add interactivity, animations, and other dynamic features. You can include JavaScript code in your HTML document using the <script> tag, either by including it directly in the HTML file or by referencing an external JavaScript file. JavaScript can interact with HTML elements, manipulate the DOM, and communicate with servers to dynamically update web content without requiring a page refresh. By using HTML and JavaScript together, you can create powerful and engaging web applications that run directly in the browser.

Learn more about HTML JavaScript

In conclusion

By utilizing advanced HTML tags and techniques, web developers can take their web design skills to the next level. From creating dynamic animations with the canvas element, to implementing responsive images and web components, these techniques allow for more interactive and user-friendly web experiences. Additionally, it is important to consider accessibility when designing web content, ensuring that all users can access and interact with the content. With these tools and techniques, web developers can create more engaging, accessible, and responsive web pages.

1 note · View note

thewebdesignerpro · 4 months

Text

WebGL Sunny Scenery

WebGL 3D demo of a beautiful, sunny, scenery, with lens flare & sky shader.

Check it out:

https://thewebdesignerpro.com/scenery.html

#three.js #webgl #3d #rendering #animation #canvas #html5 #lens flare #sky shader #sunrise #sunset

3 notes · View notes

geek-cc · 4 months

Text

Generate Icon Images From Font Symbols Using Vanilla JavaScript

Generate Icon Images From Font Symbols Using Vanilla JavaScript https://javascript.plainenglish.io/generate-icon-images-from-font-symbols-using-vanilla-javascript-b8da434378ee

Save lots of time from surfing the net for simple, everyday icons.

#web app #web application development #programming #productivity #frontend #tech #technology #javascript #html5 #icons #fonts #canvas #web graphics #graphic design

2 notes · View notes

sa-game-remake · 1 year

Note

Is there a version I can download on my iPad?

Of the old game? If you downloaded the game in the past, you can go to the Purchased tab of the App Store and download the app again. There's some evidence that either new devices or new iOS versions don't play nice with it, so it's not guaranteed it'll open and play.

Even then you can only play on Guest mode (no multiplayer, only one character). That's inevitable since the main servers no longer exist, so there's nothing to log into or anything to organise multiplayer.

Of the remake? It's not playable yet, but since it'll be a website (most likely game.keeperofgreenhaven.net), it should be playable from any device that has a web browser.

#correction: web browser with HTML5 <canvas> capabilities. You'd be hard-pressed to find a web browser without though.#HTML5 is 2008. Even Internet Explorer has canvases #apologies for delay

2 notes · View notes

duel-tactics · 2 years

Video

Some footage of basic turning and movement. - Player can turn to any direction from any direction - Player moves forward when they press a key in the direction they’re facing - Player can strafe, or move left, right or backwards while maintaining their direction of facing - Player can fall off the edge, into void or deep water spaces *player blinking is just a placeholder sprite sheet being stepped through*

#devlog gamedev jsdev javascriptgame html5 canvas htmlcanvas tactics finalfantasytactics tacticsogre indiegame indiegamedev

3 notes · View notes

gabi-anime-blog · 5 months

Text

Exploring the Exciting World of HTML5 APIs

HTML5 is not just a markup language; it’s a powerhouse of features and functionalities that have revolutionized web development. One of the most fascinating aspects of HTML5 is its extensive collection of APIs (Application Programming Interfaces) that enable developers to create interactive and dynamic web applications. Today, let’s take a closer look at some of the most useful and interesting…

View On WordPress

#Canvas API #Geolocation API #HTML5 APIs

0 notes

themesnulled · 9 months

Photo

New Post has been published on https://themesnulled.us/canvas-v7-1-1-the-multi-purpose-html5-template/

Canvas v7.1.1 - The Multi-Purpose HTML5 Template

#canvas #html5 #multipurpose #template #v711

0 notes

pluginjs · 1 year

Text

#images #resize #crop #jquery #plugin #resizer #html5 #cropimage #javascript #canvas

0 notes

iron-shears · 8 months

Text

Ignota's Top Surgery Fund Commissions!

Hello! I am Ignota. I am a 25-year-old non-binary artist, known mostly for my pixel animations, my comics, the Godot games/interactives I've made/am making for the SCP Wiki, and TikTok videos. I recently FINALLY got my insurance to cover top surgery(I live in California, but my insurance is out of Florida)

I just found out my insurance kinda lied about my doctor being in-network. My insurance agreed to cover the top surgery itself but does not cover the surgical center I need to get it done at. I've been quoted at $2140, not including additional medical workup, prescriptions, travel, and temporary living expenses.

I am trying to reach out to my insurance to see if it'll be covered, but I am about to age out of my current insurance and I am not in a position to afford new insurance. There is still a chance I can convince my insurance to cover it, but this is time-sensitive and I want to have the ABILITY to do it regardless. So, I am doing commissions now.

PRICING

Pixel animation $50-$400

$50(Art similar to the first image): Maximum of 12 frames. One character. Very limited movement. Canvas size under 135x135

$80(Art similar to the second image) Maximum of 24 frames at any framerate(Typically 4fps for 6 seconds or 8fps for 3 seconds), Simple Movement, 1-2 characters, maximum canvas size of 135x135. Price can be adjusted to accommodate more detail

$200(Art similar to the third image) a couple characters, a detailed environment, and a moving scene. Maximum canvas of 256x240. The scene can be converted to a simple one-room HTML5 format that can play in-browser.

$400+(Art similar to the fourth Image) A complex environment, multiple characters/moving parts, and the ability for a scrolling background.

Illustrations $50-$250

$50(Art similar to the first image): A simple close-up shot in any style.

$100(Art similar to the second image) A simple scene or full body with no background.

$250+(Art similar to the third and fourth images) A complex environment. Alternatively, a detailed comic page.

All features are negotiable and individual requests might change the price. If there's something from one tier you want but don't want all the other stuff, chances I may be able to work something out that will fit your needs. These descriptions are suggestions to make it a little easier, not solid outlines of what they need to look like. Feel free to bring other ideas to the table. I have worked on background illustrations and pixel animations for indie devs making games, Dungeons and Dragons character sheets, individual character pieces, and many other things in the past.

Contact me through my Email([email protected]) or my Discord(ironshears)! Alternatively, I do have a Ko-Fi if you want to support my art.

Alex Thorley's Blind Date(The Dating Sim) by me under CC-BY-SA

Kuobach's Eyes(Orange Comic) by me under CC-BY-SA

Nacre Series by me under CC-BY-SA

The other pixel game in question is tentatively titled Brand New Colors and has not been completed yet, but you can find more of it on my blog. It will also be under CC-BY-SA

#artwork #commissions #lgbtq #top surgery #scp foundation #scp #transgender #nonbinary

122 notes · View notes

irradiate-space · 12 days

Text

Kinda fucked up that the best input method I can find for drawing Japanese characters is to open Google Translate in a web browser and then copy the characters from there into a text editor.

But also very cool that the state of the art is "touchscreen on Linux works with HTML5 Canvas APIs in Firefox to allow fingerpainting, and Google Translate can convert that to Unicode".

「機動戦士Zガンダム」メモリアル・ボツクスの第2弾をおとどけします。第1弾では、第1話から26話、すなわち物語の導ス部から、主役モビル・スーツ、Zガンダムの登場までが収られ、かつての1stガンダムの主要キヤラクターたち(シヤア、アムロ、ブライトら) の葛藤、また宿命の出会いとなろヒ口イン=フオウ・ムラサメとのドラマが繰り広げられました。この第2弾では、エウ一ゴ対テイターンズ対テイターンズの抗争に、新たにハマーン・カーン率いるネオ・ジオン軍が加わり、さらに八一ドなドラマか繰り広げられます。戦いの果て、ニュータイプ戦士たちが見た"刻の涙"を、あなたも..

It works, without much thought.

#japanese #linux #DeepL #translation #scanlation

22 notes · View notes

webtutorsblog · 1 year

Text

Advanced HTML Tutorial: Online Tutorial for Web Designing

Are you interested in taking your web development skills to the next level? Look no further than WebTutor! Our advanced HTML tutorial is the perfect resource for those who want tolearn advanced HTML and CSS.

Before you start, you may be wondering what you need to begin learning HTML and CSS. Our tutorial covers the essentials, including the software and hardware requirements for effective web development.

At WebTutor, we believe that learning should be accessible to everyone. That's why we've compiled a list of the best HTML and CSS tutorials available online. Whether you're just starting out or you're looking to improve your skills, these resources are a great place to start.

Our advanced HTML tutorial covers a wide range of topics, including advanced HTML elements, CSS layout techniques, and more. You'll learn how to create responsive designs, optimize images for the web, and use advanced CSS selectors to style your pages.

In addition to our tutorial, we recommend using online web tutorials to supplement your learning. These tutorials offer a wealth of information and can help you stay up-to-date with the latest web development trends and best practices.

Learning to code can be overwhelming at times. That is why it's important to have a support system in place. Our tutorial will teach you how to find support when you need it, whether it's through online communities or in-person meetups.

So what are you waiting for? Sign up for WebTutor advanced HTML tutorial today and take the first step towards becoming a skilled web developer! In conclusion, by utilizing advanced HTML tags and techniques, web developers can take their web design skills to the next level. From creating dynamic animations with the canvas element, to implementing responsive images and web components, these techniques allow for more interactive and user-friendly web experiences. Additionally, it is important to consider accessibility when designing web content, ensuring that all users can access and interact with the content. With these tools and techniques, web developers can create more engaging, accessible, and responsive web pages.

1 note · View note

oekakidogarchive · 11 months

Note

I’m curious: what is oekaki?

Hi! Good question. We can start with a quote from Waccoon, the creator of the Wacintaki Oekaki Boards that me and a lot of others have used in the english speaking sphere.

Oekaki is a Japanese term that roughly translates to “doodle” or “scribble.” On the Internet, oekaki boards are bulletin boards or forums dedicated to drawing pictures that are drawn using a paint program that runs in a web browser. Traditionally, early oekakis were simple pictures drawn with few colors on a canvas measuring 300 × 300 pixels, and they were posted sequentially, rather than in a threaded gallery format. Oekaki boards started showing up on Japanese web sites around 1998, were only available in Japanese, and were often dedicated to anime and video game fan art. Today, the drawing programs are much more sophisticated and allow more complex drawings of different sizes and in multiple layers, but the oekaki bulletin board format usually remains the same. Oekakis are largely dedicated to original work you have drawn yourself. Photographs or work you did not create yourself are discouraged, and in most cases are not allowed. Some oekaki boards allow you to upload pictures from your computer, but most do not. The term “oekaki” may refer to both oekaki drawings and an oekaki board. When someone draws an oekaki, they are drawing a picture. When someone draws on an Oekaki, or looks at oekakis, they are usually referring to participating on an oekaki board.

In English speaking spheres, many oekakis were dedicated to anime, pokemon, or other such popular media in the 2000s. Despite this, many of us liked to draw sparkle animals to represent ourselves in images, thus birthing the oekakidog. As said in the quote, art programs have far surpassed what the old oekaki applets can do, and are much more accessible to a young burgeoning artist than back then, so oekakis fell out of interest, and the removal of java applet support in modern browsers all but was the nail in the coffin for oekaki.

However, a lot of us are nostalgic for the old programs we used to draw in and the allure of a bulletin board styled way of community, so there's been attempts at reviving oekakis. With Paint BBS Neo basically a 1:1 port of the original Paint BBS we all loved in HTML5, I do think Oekakis have a chance at revival and for a new generation of artists to use. Who knows what the future holds?

Mod Cy

#asks

24 notes · View notes

juney-blues · 3 months

Text

god i wish there was a free animation software that could export as html5 canvas (or other web thing, like, webgl or whatever)

like your options are give unreasonable sums of money to adobe for adobe animate (or sail the high seas)

or try to wrangle a game engine like godot or game maker into doing animation

or go fuck yourself.

#juney.txt

7 notes · View notes