**** BEGIN LOGGING AT Mon Aug 11 02:59:58 2014 Aug 11 17:44:53 So quiet in here today Aug 11 17:45:06 Morning! Aug 11 17:45:08 0;- Aug 11 17:45:16 morning Aug 11 17:45:40 I looked into HTML5 canvas some yesterday Aug 11 17:45:53 did your eyes bleed? Aug 11 17:45:58 I think I've got a basic feel for how it works Aug 11 17:46:04 haha @ sugardave Aug 11 17:46:14 sugardave: You've obviously never had to deal with OpenGL :P Aug 11 17:46:30 you would be 100% correct Aug 11 17:46:48 HTML5 canvas is a godsend in comparison :P Aug 11 17:48:35 dmanderson: I'm going to grab an LttP dungeon sprite-sheet that I have lying around and try to use HTML5 canvas to make a dungeon-room with it tonight. Aug 11 17:48:46 So I can get a feel for it Aug 11 17:48:55 Nice! Aug 11 17:49:00 I really like working with canvas. Aug 11 17:49:10 I did a faux 3d racer last year for a presentation Aug 11 17:49:20 Do you use drawImage for all of your sprites and tiles? Aug 11 17:49:26 yup! Aug 11 17:49:33 I was thinking I could tile the floor using a Pattern Aug 11 17:49:54 Yeah I went the quick route, and used some PNGs and it was so nice. Aug 11 17:50:02 I see Aug 11 17:50:29 dmanderson: Have you tried using Enyo w/ it yet? Aug 11 17:50:38 The thing I liked most about canvas dev, was the ability to layer canvas’ on top of each other so easily Aug 11 17:50:49 I haven’t done anything substancial with Enyo’s canvas lib yet, no. Aug 11 17:50:55 ah, k Aug 11 17:51:01 what do you mean by layering them? Aug 11 17:51:12 Because they are transparent HTML elements like everything else. Aug 11 17:51:34 Makes layered draw management a snap, where you don’t have to manage multiple plans on 1 draw Aug 11 17:51:51 You could have a canvas that has a z-index behind another one, and that could be a BG layer Aug 11 17:51:58 ah, so you are using separate canvas elements? Aug 11 17:52:04 instead of rerendering one? Aug 11 17:52:19 That’s the route I went for messing around yea :) Aug 11 17:52:25 I see Aug 11 17:52:55 I did an animated marquee with parallax for Boost Nutritional Drink, and did a single canvas draw for that. Aug 11 17:53:54 interesting Aug 11 17:54:02 https://dl.dropboxusercontent.com/u/10409166/boost_marquee/marqueev2_canvas.html Aug 11 17:54:40 copy of the prototype anyway Aug 11 17:54:51 wow Aug 11 18:02:34 So, I see you used easeljs for that marquee Aug 11 18:05:22 Yeah, it’s been a long while since I have looked at the code :) Aug 11 18:06:42 well, although you included it Aug 11 18:06:47 I'm not sure it was actually used Aug 11 18:07:07 noscript blocked it and when I unblocked it, I didn't see any changes in the marquee Aug 11 18:07:16 Maybe you planned to use it and never did? Aug 11 18:09:01 It might be in there for IE8 fallback Aug 11 18:09:11 ah, maybe Aug 11 18:09:20 If canvas isn’t available the marquee will render as clipped DIVs Aug 11 18:12:54 I see Aug 11 18:36:34 dmanderson: If my experiments w/ the spritesheet go well, I might try making some new enyo canvas kinds for tiles and such Aug 11 18:37:16 That would be great. Have you seen Blake’s latest addition as well, SpriteAnimation http://blog.enyojs.com/post/93812705854/sprite-tastic Aug 11 18:37:24 fun stuff all around for Enyo ;-) Aug 11 18:37:40 No, I had not Aug 11 18:38:36 dmanderson: His demo page isn't animating :( Aug 11 18:42:31 :-/ Aug 11 18:42:51 hrm working for me in chrome 36 Aug 11 18:43:30 not working for me in FF 31 Aug 11 18:43:55 also, he defined sprite wrong >.> Aug 11 18:59:11 So, dmanderson... I don't really understand the point of enyo.Style and the stylesheets mixin... Aug 11 19:00:45 Gives you some finer control during code time. Aug 11 19:00:51 Things like using CSS Psuedos Aug 11 19:00:55 which don’t work when inlined Aug 11 19:01:32 dmanderson: I also figured out why his example didn't work Aug 11 19:01:47 He used vendor-tagged code Aug 11 19:01:59 same for enyo.SpriteAnimation... -_- Aug 11 19:02:24 CSS pseudos don't work inlined? Aug 11 19:05:38 yea, dmanderson, this is completely made for webkit -_- (the animation stuff) Aug 11 19:08:52 A lot of enyo css uses -webkit Aug 11 19:09:41 sugardave: Enyo is supposed to be cross-platform. It's fine to use -webkit-, but to advertise a function and then not have it working in the other browsers is just wrong Aug 11 19:12:09 well, core works :D I don't know what their plans are for supporting other vendors or moving to non-vendor. Aug 11 19:13:55 No JS framework can survive w/o supporting at least both webkit and gecko Aug 11 19:14:50 by now, does gecko support prefixless everything we do with -webkit-? Aug 11 19:15:01 sugardave: Pretty much Aug 11 19:15:16 it seems like they should at least duplicate all the -webkit- ones as prefixless Aug 11 19:15:17 for the transforms, it's supported it for quite a while Aug 11 19:15:45 sugardave: The vendors are supposed to follow the standard, not follow webkit Aug 11 19:16:37 I know...I just mean duplicate like one line for -webkit-transform to transform (or whatever) Aug 11 19:17:01 one line to another line* Aug 11 19:17:15 wouldn't that work? Aug 11 19:17:28 That completely disregards the point of vendor prefixes Aug 11 19:17:49 vendor prefixes exist for features that are being tested and still actively developed Aug 11 19:18:22 often times (especially with webkit) they can even differ greatly from the standard Aug 11 19:19:10 If I had my druthers, I would want only prefixless is all I mean. The goal is to eliminate them, imo Aug 11 19:19:12 A web developer is not supposed to be relying on vendor-prefixed code all the time, but use it only sparingly Aug 11 22:34:30 So, I've started working on my canvas experiments Aug 11 22:34:51 I have acquired a spritesheet and rendered it into a canvas element Aug 11 22:34:58 now I need to break it up into sprites Aug 11 22:35:57 dmanderson: I'm thinking that I have to generate a canvas element to crop each sprite. Does that sound right to you? I didn't see any way to crop the image using just the Image object Aug 11 22:59:43 GodGinrai, I don't think there's a way to crop images in the browser without a canvas. You can probably reuse the same canvas for all of them, though. Aug 11 23:04:13 chall: yea, I was thinking I could reuse one canvas using that toDataUrl function. Aug 11 23:52:24 off screen rendering with a canvas is also ideal Aug 11 23:52:36 do the processing on a hidden canvas, then moving it to another canvas Aug 12 00:02:39 I see Aug 12 00:11:26 thats the end of my knowledge Aug 12 00:11:29 ;-) Aug 12 00:29:46 damnit Mozilla Aug 12 00:30:19 the MDN lists that context.createPattern can take any DOM element, but that you would normally want to use an image element Aug 12 00:30:49 so I thought "oh man, I can insert divs? This will be great!" and get to work on test code to see it in action Aug 12 00:31:25 only to get this error: TypeError: Argument 1 of CanvasRenderingContext2D.createPattern could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. Aug 12 00:31:29 >:( Aug 12 00:34:46 Just checked the w3 page for it, and it is indeed supposed to be only one of those 3 Aug 12 00:34:58 Mozilla needs to fix the wording on their article Aug 12 00:36:01 There really should be an easy way to draw HTML content into a canvas, tho' Aug 12 00:36:24 It would make making textboxes so much easier :P Aug 12 00:37:08 Although I guess I could just position a box over the canvas Aug 12 00:37:14 and achieve a similar effect. Aug 12 00:47:22 Well, I'm successfully tiling a background using a pattern :) Aug 12 01:05:10 but now I can't seem to draw the same image twice... Aug 12 01:05:26 I tried to draw one corner in, then rotate and translate and draw the other corner Aug 12 01:05:32 but I'm not getting anywhere Aug 12 01:06:36 It just won't draw the second corner Aug 12 01:10:39 ah Aug 12 01:10:43 got all 4 corners now Aug 12 01:11:28 I'm not sure it was worth it doing it that way instead of having 4 separate tiles, tho'... Aug 12 02:15:07 @GodGinrai I think what you need is https://famo.us/ Aug 12 02:21:17 Nah, Roy__ This is simply a learning experience **** ENDING LOGGING AT Tue Aug 12 02:59:58 2014